小編給大家分享一下CommonsChunkPlugin抽取公共模塊的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
引言
webpack插件CommonsChunkPlugin的主要作用是抽取webpack項目入口chunk的公共部分
該插件是webpack項目常用的一個優(yōu)化功能，幾乎在每個webpack項目中都會用到。使用該插件帶來的好處：
提升webpack打包速度和項目體積：將webpack入口的chunk文件中所有公共的代碼提取出來，減少代碼體積；同時提升webpack打包速度。
利用緩存機制：依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。
但是在項目中，若插件打開方式不正確的話，上面的第二點其實是無法實現(xiàn)，因為這種情況下：
沒有被修改過的公有代碼或庫代碼打包出的Entry Chunk，會隨著其他業(yè)務(wù)代碼的變化而變化，導(dǎo)致頁面上的長緩存機制失效。
那么，下面就來開啟CommonsChunkPlugin正確的打開方式。
CommonsChunkPlugin不正確用法
假如將我們項目的公共庫如react、react-dom、react-router與業(yè)務(wù)代碼隔離，將其提取為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"]})
]
};上面將項目一些基礎(chǔ)庫打包成一個名為vendor的chunk中，并將業(yè)務(wù)相關(guān)的代碼打包到一個名為app的chunk中；
webpack打包編譯后的結(jié)果如下：
我們對其中的業(yè)務(wù)代碼app.js進行修改后，重新編譯結(jié)果如下：
可以發(fā)現(xiàn)，在CommonsChunkPlugin這種配置下，當業(yè)務(wù)代碼app發(fā)生變化，而庫代碼也跟著變化，vender的chunkhash也跟著變化，這樣vendor的引用的名稱跟著變化，導(dǎo)致瀏覽器端的長緩存機制失效。
引起問題的原因
引起webpack每次打包編譯時vendor跟著變化的原因：
webpack每次build的時候都會生成一些運行時代碼。當只有一個文件時，運行時代碼直接塞到這個文件中。當有多個文件時，運行時代碼會被提取到公共文件中，也就是上面CommonsChunkPlugin配置的vendor chunk中。
webpack每次編譯時產(chǎn)生的運行時代碼，包括全局webpackJsonp方法的定義和維護模塊依賴關(guān)系，具體可以參考這里的commons.js。
所以，上面webpack的CommonsChunkPlugin配置中，每次編譯時這些代碼都會打包到vendor中，導(dǎo)致每次vendor的chunkhash每次都會變化。
那么，我們可以在對vendor chunk進行配置，抽取其中的公共代碼，即webpack運行時代碼，這樣就可以將項目依賴的基礎(chǔ)庫模塊與業(yè)務(wù)模塊隔離開來，因為不會對這些文件進行修改，所以這些文件可達到長緩存的作用。具體配置如下：
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']
})
]
};這樣，即使修改業(yè)務(wù)app代碼，項目依賴的基礎(chǔ)庫vendor chunk也不會發(fā)生變化；只是抽取的manifest chunk每次還會變化，但是這個文件體積非常小，相比vendor來說這種方式的收益更大。如下圖：
修改app代碼后的打包編譯結(jié)果如下，可以看到vendor的chunkhash沒有變化
在webpack中配置CommonsChunkPlugin時需要注意一點：
配置webpack的output項時，其filename和chunkFilename必須使用chunkhash。不要使用hash，否則即使按照上面的配置也不能達到預(yù)期的效果。
看完了這篇文章，相信你對“CommonsChunkPlugin抽取公共模塊的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
