項目中有一個需求:
所有頁面引用了一個公共ad.js 因為廣告需要不斷投放新渠道,所以ad.js需要經常上線更新,這樣會導致打包出來的
commons.js經常更新,緩存一下無效了.所以急需將ad.js抽取出來,自己打包成一個JS
現在入口定義
entry['ad'] = path.resolve(dirlets.libsDir, 'ad.channel.js')
插件代碼設置為:
new webpack.optimize.SplitChunksPlugin({
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '-',
name: true,
cacheGroups: {
'ad': {
name: 'ad',
test: path.resolve(dirlets.libsDir, 'ad.channel.js'),
minChunks: 8,
maxInitialRequests: 5,
minSize: 0,
priority: 2,
},
commons: {
name: 'commons',
minChunks: 8,
maxInitialRequests: 5,
minSize: 0,
priority: 1,
},
}
}),
test設置很重要:可以設置正則,字符串,用來將匹配到的文件打包出來.
可以參考這個鏈接.https://juejin.im/post/5af15e895188256715479a9a
priority這個設置是我不斷嘗試后發現的.
如果不設置這個屬性的話,后邊commons打包的JS會包含ad chunk打包出來的包.這樣就重復無意義了.
但是將commons的priority優先級設置比ad的priority數值低的話.打包出來的就不會包含了.
以上2個配置缺一不可.多次嘗試后發現的.
