在我的应用中,我分为两个主要部分:管理部分和公共部分。它们具有一些通用的模块,但是通常它们的功能是非常不同的,我想将代码分为两部分。在Webpack 3中,我将CommonChunksPlugin与以下配置结合使用:
{
entry: ['account/index', ..., 'public/index', ...],
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'account/common',
chunks: [
'account/default',
'account/placeGeneral',
'account/placeContacts',
'account/placeServices',
'account/placeRules',
'account/placePhoto',
'account/placeVideo',
'account/sights',
'account/placeIndex',
'account/index',
'account/balance',
'account/help',
'account/helpVideo',
'account/plan/list',
'account/plan/edit',
'account/room/list',
'account/room/edit',
'account/occupancy',
'react-common'
],
minChunks: 2
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'public/common',
chunks: [
'public/index',
'public/start',
'public/search/list',
'public/search/map',
'public/blog/index',
'public/blog/post',
],
minChunks: 2
})
]
]
此配置完美完成了工作。它在列出的模块中找到了公用部分,并将它们相应地放入了account/common.js
和public/common.js
中。在管理页面中因此,对于管理页面,我只需要包含account/common.js
和%entrypoint%.js
。对于公共页面,显然文件是public/common.js
和%entrypoint%.js
。
我试图用SplitChunksPlugin重现此代码拆分,但是失败了。我当前的配置:
// Filter chunks for cacheGroups
const includeChunks = (testChunks) => (module, chunks) => {
return chunks.reduce((result, item) => (result || testChunks.indexOf(item.name) !== -1), false);
};
{
...
entry: ['account/index', ..., 'public/index'],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'initial',
minSize: 0,
maxInitialRequests: 2, //Infinity,
maxAsyncRequests: Infinity,
minChunks: 2,
name(module, chunks, cacheGroupKey) {
return cacheGroupKey;
},
cacheGroups: {
'default': false,
'account/common': {
test: includeChunks([
'account/default',
'account/placeGeneral',
'account/placeContacts',
'account/placeServices',
'account/placeRules',
'account/placePhoto',
'account/placeVideo',
'account/sights',
'account/placeIndex',
'account/index',
'account/balance',
'account/help',
'account/helpVideo',
'account/plan/list',
'account/plan/edit',
'account/room/list',
'account/room/edit',
//'account/occupancy',
//'react-common'
]),
reuseExistingChunk: true,
},
'public/common': {
test: includeChunks([
'public/index',
'public/start',
'public/search/list',
'public/search/map',
'public/blog/index',
'public/blog/post',
]),
reuseExistingChunk: true,
}
},
},
},
...
}
管理员(account/*
)入口点看起来不错:
Webpack输出
Entrypoint account/plan/list = runtime.js runtime.js.map account/common.js account/common.js.map account/plan/list.js account/plan/list.js.map
Entrypoint account/room/edit = runtime.js runtime.js.map account/common.js account/common.js.map account/room/edit.js account/room/edit.js.map
Entrypoint account/room/list = runtime.js runtime.js.map account/common.js account/common.js.map account/room/list.js account/room/list.js.map
但是公共(place/*
)入口点变得取决于account/common
块,因为在我的应用程序的两个部分都使用了一些模块:
Webpack输出
Entrypoint public/index = runtime.js runtime.js.map account/common.js account/common.js.map public/index.js public/index.js.map
Entrypoint public/map = runtime.js runtime.js.map account/common.js account/common.js.map public/map.js public/map.js.map
Entrypoint public/place/detail = runtime.js runtime.js.map account/common.js account/common.js.map public/place/detail.js public/place/detail.js.map
我不想要它。如何配置SplitChunks插件并获取以下文件结构?
入口点account/*
-> account/common.js
,%entrypoint%.js
入口点public/*
-> public/common.js
,%entrypoint%.js