上次分析到通過devtool的配置項來設置source?map，在線上環境可以通過設置成cheap-module-source-map來生成單獨的map文件，但是map文件在線上環境會不會每次都加載呢？如果加載的話，會不會造成帶寬和請求的浪費呢？

筆者也有這樣的疑問，于是在網絡上查了一下。后來才了解到，在瀏覽器中，只有在調試模式下才會自動下載map文件，平時線上環境的話，是不用擔心這個問題的。

在使用webpack構建單頁面應用時，為什么要進行代碼分割？

如果entry中只配置了一個入口，那么如果從這個入口文件開始引入的公共庫的代碼過大，打包出來會只有一個bundle文件。當瀏覽器端加載這樣一個體積太大的bundle時就會造成加載過慢。

通常來講我們的公共庫代碼是不經常修改的。但是我們的業務代碼是經常要修改的，如果打包到不同的bundle文件可以更好的利用瀏覽器的緩存，在瀏覽器端來復用之前的公共庫的bundle文件。

那如何通過代碼分割來優化呢？

在webpack3中可以通過CommonsChunkPlugin來進行代碼分割，但是webpack4中，官方提倡使用SplitChunksPlugin這個插件，所以本次主要講解的也是在webpack4中通過SplitChunksPlugin這個插件來實現代碼分割的方法。

首先要先弄懂一個預備知識點，就是在webpack中，什么叫做chunk，什么叫做bundle？

下面這種圖可以幫助我們更好地理解：

在webpack的打包配置entry中有兩個入口：index和utils。分別對應index.js文件和utils.js文件，其中index.js文件引用了common.js和index.css。那么webpack打包的時候就會把前三個文件作為一個chunk，utils.js文件作為一個chunk，但是在webpack配置中國年用MiniCssExtractPlugin插件抽離出了css文件，所以產生了.css和.js兩個bundle文件。總之，chunk是webpack打包時候的一個概念，而產生出來的單個文件，可以在瀏覽器中運行的就叫做bundle。

其實上文中通過在webpack配置文件中配置兩個entry入口，其中utils把一些工具函數掛載到全局，也可以算是一種代碼切割，但是有沒有更加靈活的方式呢？我們來看下SplitChunksPlugin插件。

SplitChunksPlugin插件的介紹可以在webpack的官方文檔中找到：

從文檔中可以看到SplitChunksPlugin的默認配置如下：

下面會一點點來講解。

代碼分割有兩種場景：一種是同步引入代碼模塊的分割，還有一種是異步引入的代碼模塊的分割。

一、同步代碼分割：

在業務代碼中引入lodash，通過之前講的webpack-bundle-analyzer插件分析打包情況如下：

可以看出我們的src文件和node_modules文件都是在一個bundle中。如果我們想把node_module中的庫文件單獨打包到一個chunk中，我們可以把官網上的SplitChunksPlugin的默認配置拷貝到打包配置文件中，然后做如下修改：

其中chunks表示可以配置成initial、async、all分別表示靜態引入、動態引入和兩種情況下來進行代碼分割。

minSize為可以進行代碼分割的最小包體積，默認為30000Byte。而在打包分析中我們看到lodash的包體積在webpack處理完后是將近70KB，大于SplitChunksPlugin的最小打包體積。所以在做如上修改以后，便能夠將lodash打包到單獨的chunk中。打包后的情況如下：

從圖中我們可以看到，lodash被單獨打包到了叫做vendors~index.js的chunk中。

下面再來完善一下上面分析的打包流程，滿足了minSize的條件以后，順著條件往下走可以走到cacheGroups配置，cacheGroups中有不同的對象，對象中的test即為測試正則，當引用的模塊名滿足了這個測試正則后，才會按照當前對象的規則打包。

vendors這個鍵名即是打完包的前綴名，而automaticNameDelimiter中配置的就是前綴后面的連接符，后面就是引入此模塊的entry中配置的入口文件名index。

如果我們想要，自定義lodash打包的文件名，我們可以在vendors中配置filename為vendors.js如下：

那么打完包的lodash的chunk就叫做vendors.js了，而cacheGroups上方的name:true的意思就是使cacheGroups中的filename生效。

接下來介紹在splitChunks中剩余的配置：

minChunks是什么意思呢？他的意思就是在entry中配置的入口，引用了該模塊的最少個數，只有滿足了最少有minChunks個chunk引用了當前模塊，才會進行單獨打包。

maxAsyncRequests表示代碼分割完后，同時可以請求的最大數量。

maxInitialRequests表示首頁中的最大請求數，如果代碼分割后，首頁請求的請求數大于這個數，就不會再繼續代碼分割了。

二、異步代碼分割：

大家可能還不是很熟悉異步加載的語法，可以在官網的API部分中找到import異步加載的語法說明，其實就是ES6的一種語法：

而在webpack的使用中，webpack通過一種叫做“魔法注釋”的功能豐富了打包功能，下面會詳細看到。

在webpack中SplitChunksPlugin默認就會對異步引入的代碼進行分割，但是為了支持異步引入模塊的語法，我們還是需要安裝babel的plugin-syntax-dynamic-import插件來支持異步加載的語法。

下面來詳細看下我們的業務代碼：

在index.js中，我們通過click事件動態引入了handleClick.js文件，其中注釋的部分就是通過魔法注釋來給分割的chunk命名為handleClick。

在handleClick.js文件中，我們為文檔添加元素(其中process.env.NODE_ENV是運行時環境變量，可以參考之前幾期的推送)。

從下面的運行效果我們可以看到，當網頁刷新的時候，先加載出來index.html文件和index.js文件。當點擊網頁的時候，才會去請求handleClick.js文件，并且網頁上出現“123”。

其實異步代碼分割還有一個大家可能更熟悉的名字——懶加載。

但是，如果被異步加載的模塊很大，我們在真實項目中操作完了再臨時請求，會不會還是加載很慢。為了解決這個問題，可以使用魔法注釋中的webpackPrefetch來讓瀏覽器加載完首頁的js文件后空閑的時候去加載異步分割的bundle文件。

參考：

https://segmentfault.com/q/1010000000396077

https://juejin.im/post/5cede821f265da1bbd4b5630#heading-15

https://coding.imooc.com/lesson/316.html#mid=22363

總結

以上是生活随笔為你收集整理的webpack打包生成的map文件_一站式搞明白webpack中的代码分割的全部內容，希望文章能夠幫你解決所遇到的問題。

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