淺談 記一次 import 打包 印象誤區

摘要： 今天寫專案看到一個問題很有意思。先丟擲一個問題，哪個寫法效能高？ 第一種寫法 a.js: export const a = '1'; export const b = '2'; export const c = '3';...

今天寫專案看到一個問題很有意思。先丟擲一個問題，哪個寫法效能高？

• 第一種寫法

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

結論

我們看到 第一種 和 第二種 寫法 打包出來 完全一樣.至於第三種，其實就是包了一層 default Object 而已。再來一張圖。

；

所以其實三種寫法 並沒有多大卵區別，非說有的話。。。那就是第三種多了一層 obj 吧。如果您有更深刻的理解歡迎 評論。分享無罪，歡迎組隊