複習webpack4之Code Splitting

以前學習過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不只能分割同步引入的代碼，還能夠分割異步引入的代碼。