webpack學習之—— Code Spliting(代碼分離)
阿新 • • 發佈:2017-12-23
ons height comm chunks 優先級 不能 tex pan ati
代碼分離特性能夠把代碼分離到不同的 bundle 中,然後可以按需加載或並行加載這些文件。代碼分離可以用於獲取更小的 bundle,以及控制資源加載優先級,如果使用合理,會極大影響加載時間。
有三種常用的代碼分離方法:
- 入口起點:使用
entry
配置手動地分離代碼。 - 防止重復:使用
CommonsChunkPlugin
去重和分離 chunk。 - 動態導入:通過模塊的內聯函數調用來分離代碼。
1. 入口起點(entry points)
這是迄今為止最簡單、最直觀的分離代碼的方式。不過,這種方式手動配置較多,並有一些陷阱,我們將會解決這些問題。先來看看如何從 main bundle 中分離另一個模塊:
正如前面提到的,這種方法存在一些問題:
- 如果入口 chunks 之間包含重復的模塊,那些重復模塊都會被引入到各個 bundle 中。
- 這種方法不夠靈活,並且不能將核心應用程序邏輯進行動態拆分代碼。
2. 防止重復(prevent duplication)
CommonsChunkPlugin
插件可以將公共的依賴模塊提取到已有的入口 chunk 中,或者提取到一個新生成的 chunk。讓我們使用這個插件,將之前的示例中重復的 lodash
模塊去除:
3. 動態導入(dynamic imports)
當涉及到動態代碼拆分時,webpack 提供了兩個類似的技術。對於動態導入,第一種,也是優先選擇的方式是,使用符合 ECMAScript 提案 的 import()
語法。第二種,則是使用 webpack 特定的 require.ensure
。讓我們先嘗試使用第一種……
在我們開始本節之前,先從配置中移除掉多余的 entry
和 CommonsChunkPlugin
,因為接下來的演示中並不需要它們:
src/index.js:
在註釋中使用了 webpackChunkName
。這樣做會導致我們的 bundle 被命名為 lodash.bundle.js
,而不是 [id].bundle.js
。
webpack學習之—— Code Spliting(代碼分離)