小編給大家分享一下CommonsChunkPlugin抽取公共模塊的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比巨野網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式巨野網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋巨野地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

引言

webpack插件CommonsChunkPlugin的主要作用是抽取webpack項(xiàng)目入口chunk的公共部分

該插件是webpack項(xiàng)目常用的一個(gè)優(yōu)化功能，幾乎在每個(gè)webpack項(xiàng)目中都會(huì)用到。使用該插件帶來(lái)的好處：

提升webpack打包速度和項(xiàng)目體積：將webpack入口的chunk文件中所有公共的代碼提取出來(lái)，減少代碼體積；同時(shí)提升webpack打包速度。

利用緩存機(jī)制：依賴的公共模塊文件一般很少更改或者不會(huì)更改，這樣獨(dú)立模塊文件提取出可以長(zhǎng)期緩存。

但是在項(xiàng)目中，若插件打開(kāi)方式不正確的話，上面的第二點(diǎn)其實(shí)是無(wú)法實(shí)現(xiàn)，因?yàn)檫@種情況下：

沒(méi)有被修改過(guò)的公有代碼或庫(kù)代碼打包出的Entry Chunk，會(huì)隨著其他業(yè)務(wù)代碼的變化而變化，導(dǎo)致頁(yè)面上的長(zhǎng)緩存機(jī)制失效。

那么，下面就來(lái)開(kāi)啟CommonsChunkPlugin正確的打開(kāi)方式。

CommonsChunkPlugin不正確用法

假如將我們項(xiàng)目的公共庫(kù)如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"]})
 ]
};

上面將項(xiàng)目一些基礎(chǔ)庫(kù)打包成一個(gè)名為vendor的chunk中，并將業(yè)務(wù)相關(guān)的代碼打包到一個(gè)名為app的chunk中；

webpack打包編譯后的結(jié)果如下：

我們對(duì)其中的業(yè)務(wù)代碼app.js進(jìn)行修改后，重新編譯結(jié)果如下：

可以發(fā)現(xiàn)，在CommonsChunkPlugin這種配置下，當(dāng)業(yè)務(wù)代碼app發(fā)生變化，而庫(kù)代碼也跟著變化，vender的chunkhash也跟著變化，這樣vendor的引用的名稱跟著變化，導(dǎo)致瀏覽器端的長(zhǎng)緩存機(jī)制失效。

引起問(wèn)題的原因

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

webpack每次build的時(shí)候都會(huì)生成一些運(yùn)行時(shí)代碼。當(dāng)只有一個(gè)文件時(shí)，運(yùn)行時(shí)代碼直接塞到這個(gè)文件中。當(dāng)有多個(gè)文件時(shí)，運(yùn)行時(shí)代碼會(huì)被提取到公共文件中，也就是上面CommonsChunkPlugin配置的vendor chunk中。

webpack每次編譯時(shí)產(chǎn)生的運(yùn)行時(shí)代碼，包括全局webpackJsonp方法的定義和維護(hù)模塊依賴關(guān)系，具體可以參考這里的commons.js。

所以，上面webpack的CommonsChunkPlugin配置中，每次編譯時(shí)這些代碼都會(huì)打包到vendor中，導(dǎo)致每次vendor的chunkhash每次都會(huì)變化。

那么，我們可以在對(duì)vendor chunk進(jìn)行配置，抽取其中的公共代碼，即webpack運(yùn)行時(shí)代碼，這樣就可以將項(xiàng)目依賴的基礎(chǔ)庫(kù)模塊與業(yè)務(wù)模塊隔離開(kāi)來(lái)，因?yàn)椴粫?huì)對(duì)這些文件進(jìn)行修改，所以這些文件可達(dá)到長(zhǎng)緩存的作用。具體配置如下：

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代碼，項(xiàng)目依賴的基礎(chǔ)庫(kù)vendor chunk也不會(huì)發(fā)生變化；只是抽取的manifest chunk每次還會(huì)變化，但是這個(gè)文件體積非常小，相比vendor來(lái)說(shuō)這種方式的收益更大。如下圖：

修改app代碼后的打包編譯結(jié)果如下，可以看到vendor的chunkhash沒(méi)有變化

在webpack中配置CommonsChunkPlugin時(shí)需要注意一點(diǎn)：

配置webpack的output項(xiàng)時(shí)，其filename和chunkFilename必須使用chunkhash。不要使用hash，否則即使按照上面的配置也不能達(dá)到預(yù)期的效果。

看完了這篇文章，相信你對(duì)“CommonsChunkPlugin抽取公共模塊的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！