之前學習過webpack3的知識，但是webpack4升級后還是有很多變動的，所以這次重新整理一下webpack4的知識點，方便以后復習。

這次學習webpack4不僅僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，比如打包原理等等，所以可能會省略一些比較基礎的內容，但是希望我可以通過此次學習掌握webpack，更好地應對以后的工作。

1.為什么要進行Code Splitting

我們先舉一個例子，在index.js中引入lodash。

然后進行打包，我們會發現按照以前的配置，會把lodash和我們的業務代碼打包到一起，這其實會有問題：

用戶第一次進入頁面，會加載main.js(假如是2MB)，當業務邏輯發生變化，重新打包上線后，用戶進入頁面又要重新加載2MB的文件，就會造成浪費。lodash這個庫在我們開發過程中，基本不會去改變里面的內容，所以應該把這部分代碼單獨生成一個js文件，這樣業務邏輯變化就不會影響到lodash的代碼了。

2.初步Code Splitting

我們新建一個lodash.js，然后在里面引入lodash，并且掛在到window上，然后index.js直接調用lodash的方法。

重新配置entry和output:

重新進行打包，會有兩個JS文件。

在這種情況下，用戶第一次進入頁面，加載兩個JS，業務邏輯發生變化重新打包后，lodash.js并不需要重新加載，節約了資源，也節省了一部分時間。

3.利用webpack做Code Splitting

首先重新引入lodash庫

然后在webpack.config.js中添加配置項

進行打包，觀察打包的文件，除了main.js，還多生成了一個vendor.js文件，我們觀察main和vendor發現，main.js里面只有業務邏輯，而vendor里面只有lodash的代碼。

使用這個配置項，webpack自動幫我們進行了代碼分割。

4.動態引入庫

新建一個js文件，增加如下代碼。

但是現在webpack對動態引入處于實驗性階段，所以想要打包還要安裝一個插件。

cnpm install babel-plugin-dynamic-import-webpack -D

在.babelrc中增加如下配置。

進行打包，打包后發現生成這些文件。

這時，lodash的代碼都在0.js中，所以webpack不僅能分割同步引入的代碼，還可以分割異步引入的代碼。

轉載于:https://juejin.im/post/5cd04e2ee51d45379a1642f5

總結

以上是生活随笔為你收集整理的复习webpack4之Code Splitting的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。