問題
今天寫專案看到一個問題很有意思。先丟擲一個問題，哪個寫法效能高？
- 第一種寫法
a.js:
export const a = '1';
export const b = '2';
export const c = '3';
export const d = '4';
複製程式碼b.js:
import {a, b} from './a';
console.log(a, b);
複製程式碼- 第二種寫法
a.js:
export const a = '1';
export const b = '2';
export const c = '3';
export const d = '4';
複製程式碼b.js:
import * as obj from './a';
console.log(obj.a, obj.b);
複製程式碼- 第三種寫法：
a.js
export default {
a: '1',
b: '2',
c: '3',
d: '4'
}
複製程式碼b.js
import obj from './a';
console.log(obj.a, obj.b);
複製程式碼這個問題對於沒有深刻了解過 webpack 打包原理機制的我來說還真的有點迷了。所以決定這段時間去好好研究一波。
測試
我們的測試很簡單：
配置一個 webpack4 的環境
建立了 a.js, b.js 然後就這麼寫，然後打包，就這麼簡單。
-
"webpack": "^4.26.1"
-
"webpack-cli": "^3.1.2"
上圖
第一種
a.js
b.js
第二種
a.js
b.js
第三種
a.js
b.js
結論 + 修正
在development 模式下 我們看到 第一種 和 第二種 寫法 打包出來 完全一樣.至於第三種，其實就是包了一層 default Object。再來一張圖。
感謝各位評論，尤其 異次元的廢D 大佬， 我似乎確實忽略了一個東西 tree shaking。這是一種 webpack 的打包優化機制，詳細資訊請移步至 Webpack Tree shaking 深入探究、 尤大大他們的回答
當我換成 production 時可以看出 1、2寫法其實也沒有什麼區別。並且是直接賦了值：
第三種寫法，是用了一個物件，所以當然會全部將變數打包進去。
異次元的廢D 大佬 更推薦第一種寫法。觀點是，不應該依賴打包工具的優化而去改變。我其實贊同。
但我這種觀點就目前的這個例子來說，我覺得各有利弊。
如果您有更深刻的理解歡迎 評論。分享無罪，歡迎組隊