webpack拓展篇（六十七）：webpack5 新特性解析

說明

玩轉 webpack 學習筆記

webpack5 正式釋出

webpack5 在 2020-10-10 正式釋出

官網：​​https://webpack.js.org/blog/2020-10-10-webpack-5-release/​​

webpack5 新特性

• 功能清除

• 不再為 Node.js 子產品自動引用 Polyfills
• ​

  ​require.include​

  ​ 文法已經被廢棄
• 移除 v4 版本的廢氣能力的代碼

• 長期緩存

• 新增長期緩存算法，确定的 Chunk、子產品 ID 和導出名稱，在生産模式下預設啟用。
• 真正的内容 Hash

• 開發支援

• 命名代碼塊 ID：在開發模式下預設啟用的新命名塊 id 算法為塊（和檔案名）提供人類可讀的名稱。
• 子產品聯邦：子產品可以從指定的遠端建構中導入，并以最小的限制使用。

• 支援嶄新的 web 平台特性

• JSON 子產品

• 在使用非預設導出時發出警告
• 使用預設導出，未使用的屬性也會被​

  ​optimization.usedExports​

  ​​ 優化丢棄，屬性會被​

  ​optimization.mangleExports​

  ​ 優化打亂

• 資源子產品

• 支援浏覽器原生提供的寫法：​

  ​new URL("./image.png", import.meta.url)​

  ​(新方式)
• ​

  ​import url from "./image.png")​

  ​(老方法)

• 原生 Worker 支援

• 支援​

  ​new Worker(new URL("./image.png", import.meta.url))​

  ​ 浏覽器預設支援的文法

• URIs

• 支援 data
• 支援 file
• 支援 http(s) ：需要通過​

  ​new webpack.experiments.schemesHttp(s)UriPlugin()​

  ​ 選擇加入

• 異步子產品

• 異步的外部資源(async externals)
• 新規範中的 WebAssembly 子產品
• 使用頂層 Await 的 ECMAScript 子產品

• 支援安全的 node.js 生态特性解析

• 現在支援 package.json 中的 exports 和 imports 字段
• 原生支援 Yarn PnP

• 建構優化

• 嵌套的 tree-shaking
• 内部子產品 tree-shaking
• CommonJs Tree Shaking
• 副作用分析

• 性能優化

• 持久緩存
• 編譯器閑置和關閉
• 檔案生成

下面選取一些分析一下。

最小 Node.js 版本：10.13.0

最低支援的 Node.js 版本從 6 增加到 ​

​10.13.0​

​

功能清除：清理棄用的能力

所有在 webpack4 裡面被廢棄的能力都被清除，是以需要確定 webpack4 沒有列印警告 。

​

​requre.includes​

​ 文法已被廢棄（作用：實作一個子產品預加載）

• 可以通過​

  ​Rule.parser.requirelnclude​

  ​ 将行為改為允許、廢棄或禁用。

功能清除：不再為 Node.js 子產品引入 polyfill

之前的版本是：如果某個子產品依賴 Node.js 裡面的核心子產品，那麼這個子產品被引入的時候會把 Node.js 整個 polyfill 順帶引入。

webpack4：裡面利用 ​​node-libs-browser​​ 這個實作 polyfill 的。

webpack5

長期緩存：确定的子產品 ld、chunk 和導出名稱

在生産模式下，預設的 ​

​chunklds: "deterministic", modulelds:“deterministic"​

​​。設定成 ​

​deterministic​

​ 時預設最小3位數字會被使用

chunklds

選項值	描述
​ ​natural​ ​	按使用順序的數字 id。
​ ​named ​ ​	對調試更友好的可讀的 id。
​ ​deterministic​ ​	在不同的編譯中不變的短數字 id。 有益于長期緩存。在生産模式中會預設開啟。
​ ​size​ ​	專注于讓初始下載下傳包大小更小的數字 id。
​ ​total-size​ ​	專注于讓總下載下傳包大小更小的數字 id。

modulelds

選項值	描述
​ ​natural​ ​	按使用順序的數字 id。
​ ​named ​ ​	對調試更友好的可讀的 id。
​ ​deterministic​ ​	在不同的編譯中不變的短數字 id。 有益于長期緩存。在生産模式中會預設開啟。
​ ​size​ ​	專注于讓初始下載下傳包大小更小的數字 id。

例子：

webpack4：​

​1，2，3...​

​ 遞增的方式

webpack5：數字是确定的，比如多個 import 子產品時，不會因為一個變化了而産生變化。

持久化緩存

在 webpack4 裡面，可以使用 cache-loader 将編譯結果寫入硬碟緩存，還可以使用 babel-loader,設定 ​

​option.cacheDirectory​

​ 将 babel-loader 編譯的結果寫進磁盤。

webpack5緩存政策

• 預設開啟緩存，緩存預設是在記憶體裡。可以對 cache 進行設定。
• 緩存淘汰政策：檔案緩存存儲在​

  ​node_ modules/.cache/webpack​

  ​，最大 500 MB, 緩存時常兩個星期，舊的緩存先淘汰

建構優化

Tree Shaking 優化 — 嵌套的 Tree shaking

例子：module.js 裡使用了 inner.js，然後 user.js 裡使用了 module.js 檔案

webpack4：

webpack5：

Tree Shaking 優化 — 内部子產品 Tree shaking

例子：usingSomething 裡使用了 something，test 裡使用了 usingSomething，但是 test 未被使用。

webpack4 會打包進去

webpack5 裡可以分析子產品之間的關系（内部通過一個 ​

​innerGraph 算法​

​去實作），上面不會打包

代碼生成：支援生成 ES6 代碼

webpack4 之前隻生成 ES5 的代碼。

webpack5 則現在既可以生成 ES5 又可以生成 ​

​ES6/ES2015​

​ 代碼。

兩種設定方式：​

​5 =< ecmaVersion <= 11​

​​ 或 ​

​2009 =< ecmaVersion <= 2020​

​

比如：寫 2015 也是可以的

開創性的特性：子產品聯邦

發明者：​

​Zack Jackson​

​

子產品聯邦可以實作微前端。

基本解釋：使一個 JavaScript 應用在運作過程中可以動态加載另一個應用的代碼， 并支援共享依賴(CDN)。不再需要本地安裝 Npm 包。

• Remote：被依賴方，被 Host 消費的 Webpack 建構
• Host：依賴方，消費其他 Remote 的 Webpack 建構

一個應用可以是 Host，也可以是 Remote，也可以同時是 Host 和 Remote。

ModuleFederationPlugin 介紹

Webpack 内部通過 ModuleFederationPlugin 插件将多個應用結合起來。

• name：必須，唯一 ID, 作為輸出的子產品名，使用的時通過​

  ​${name}/${expose}​

  ​ 的方式使用
• library：必須，其中這裡的 name 為作為 umd 的 name; .
• remotes：可選，表示作為 Host 時，去消費哪些 Remote;
• shared：可選，優先用 Host 的依賴，如果 Host 沒有，再用自己的;
• main.js：應用主檔案
• remoteEntry.js：作為 remote 時被引的檔案

子產品聯邦使用案例

應用 host：要去消費 app2，端口号 3002

應用 remote：提供了 Button 元件

浏覽器的效果app1 應用使用了 app2 的 Button 元件端口為 3001

app2 應用端口為 3002

app1 怎麼找到 app2 的？

通過 remoteEntry.js 找到生産者的子產品。

app2 提供了 button

app1 使用 button

這樣就達到了元件的共享。