如何使用webpack4和splitChunks重复CommonsChunkPlugin行为?

时间:2019-03-29 08:07:29

标签: webpack webpack-4 code-splitting

在我的应用中,我分为两个主要部分:管理部分和公共部分。它们具有一些通用的模块,但是通常它们的功能是非常不同的,我想将代码分为两部分。在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.jspublic/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

0 个答案:

没有答案