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

Mask_發表於2019-03-01

問題

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

  • 第一種寫法

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

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

b.js

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

第二種

a.js

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

b.js

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

第三種

a.js

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

b.js

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

結論 + 修正

在development 模式下 我們看到 第一種 和 第二種 寫法 打包出來 完全一樣.至於第三種,其實就是包了一層 default Object。再來一張圖。

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

感謝各位評論,尤其 異次元的廢D 大佬, 我似乎確實忽略了一個東西 tree shaking。這是一種 webpack 的打包優化機制,詳細資訊請移步至 Webpack Tree shaking 深入探究尤大大他們的回答

當我換成 production 時可以看出 1、2寫法其實也沒有什麼區別。並且是直接賦了值:

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

第三種寫法,是用了一個物件,所以當然會全部將變數打包進去。

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

異次元的廢D 大佬 更推薦第一種寫法。觀點是,不應該依賴打包工具的優化而去改變。我其實贊同。

但我這種觀點就目前的這個例子來說,我覺得各有利弊。

如果您有更深刻的理解歡迎 評論。分享無罪,歡迎組隊

相關文章