問題
今天寫專案看到一個問題很有意思。先丟擲一個問題,哪個寫法效能高?
- 第一種寫法
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 大佬 更推薦第一種寫法。觀點是,不應該依賴打包工具的優化而去改變。我其實贊同。
但我這種觀點就目前的這個例子來說,我覺得各有利弊。
如果您有更深刻的理解歡迎 評論。分享無罪,歡迎組隊