引言

webpack插件CommonsChunkPlugin的主要作用是抽取webpack項目入口chunk的公共部分，具體的用法就不做過多介紹，不太了解可以參考webpack官網介紹；

該插件是webpack項目常用的一個優化功能，幾乎在每個webpack項目中都會用到。使用該插件帶來的好處：

• 提升webpack打包速度和項目體積：將webpack入口的chunk文件中所有公共的代碼提取出來，減少代碼體積；同時提升webpack打包速度。

• 利用緩存機制：依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。

但是在項目中，若插件打開方式不正確的話，上面的第二點其實是無法實現，因為這種情況下：

沒有被修改過的公有代碼或庫代碼打包出的Entry Chunk，會隨著其他業務代碼的變化而變化，導致頁面上的長緩存機制失效。

那麽，下面就來開啟CommonsChunkPlugin正確的打開方式。

CommonsChunkPlugin不正確用法

假如將我們項目的公共庫如react、react-dom、react-router與業務代碼隔離，將其提取為vendor chunk，webpack配置如下：

const webpack = require("webpack");
const path = require(‘path‘);
module.exports = {
  entry: {
    app
 
: "./app.js",
    vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
  },
  output: {
    path: path.resolve(__dirname, ‘output‘),
    filename: "[name].[chunkhash].js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
  ]
};

上面將項目一些基礎庫打包成一個名為vendor

webpack打包編譯後的結果如下：

我們對其中的業務代碼app.js進行修改後，重新編譯結果如下：

可以發現，在CommonsChunkPlugin這種配置下，當業務代碼app發生變化，而庫代碼也跟著變化，vender的chunkhash也跟著變化，這樣vendor的引用的名稱跟著變化，導致瀏覽器端的長緩存機制失效。

引起問題的原因

引起webpack每次打包編譯時vendor跟著變化的原因：

webpack每次build的時候都會生成一些運行時代碼。當只有一個文件時，運行時代碼直接塞到這個文件中。當有多個文件時，運行時代碼會被提取到公共文件中，也就是上面CommonsChunkPlugin配置的vendor chunk中。

webpack每次編譯時產生的運行時代碼，包括全局webpackJsonp方法的定義和維護模塊依賴關系，具體可以參考這裏的commons.js。

所以，上面webpack的CommonsChunkPlugin配置中，每次編譯時這些代碼都會打包到vendor中，導致每次vendor的chunkhash每次都會變化。

那麽，我們可以在對vendor chunk進行配置，抽取其中的公共代碼，即webpack運行時代碼，這樣就可以將項目依賴的基礎庫模塊與業務模塊隔離開來，因為不會對這些文件進行修改，所以這些文件可達到長緩存的作用。具體配置如下：

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
  },
  ....
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}),
    new webpack.optimize.CommonsChunkPlugin({
        name: ‘manifest‘,
        chunks: [‘vendor‘]
    })
  ]
};

這樣，即使修改業務app代碼，項目依賴的基礎庫vendor chunk也不會發生變化；只是抽取的manifest chunk每次還會變化，但是這個文件體積非常小，相比vendor來說這種方式的收益更大。如下圖：

修改app代碼後的打包編譯結果如下，可以看到vendor的chunkhash沒有變化

在webpack中配置CommonsChunkPlugin時需要註意一點：

配置webpack的output項時，其filename和chunkFilename必須使用chunkhash。不要使用hash，否則即使按照上面的配置也不能達到預期的效果。至於hash與chunkhash的區別，可參考github的回答

參考

1、webpack之CommonsChunkPlugin正確打開方式
2、webpack 填坑之路--提取獨立文件(模塊)
3、webpack代碼分割技巧
4、聽說你用webpack處理文件名的hash？那麽建議你看看你生成的hash對不對
5、chunkhash
6、multiple-commons-chunks

談談CommonsChunkPlugin抽取公共模塊