当一个条目依赖于另一个时,Webpack会分块复制代码

时间:2019-08-07 14:52:17

标签: webpack webpack-4 code-splitting commonschunkplugin webpack-splitchunks

更新到webpack 4之后,我无法获得与现在不赞成使用的CommonsChunkPlugin进行拆分的代码。

我的webpack配置中有2个js条目-主要和次要。 中学中学延伸小学。

Trivial Secondary.js

import Primary from './Primary';

const Components = {
    Secondary: {
        SecondaryComponent
    },
    ...Primary.Components
};

Object.assign(Primary, Secondary);

export default Primary;

使用CommonsChunkPlugin时,文件已正确分离(即,主要块中的代码未包含在次要块中,而是作为依赖项)。 Webpack的配置通常如下所示:

new webpack.optimize.CommonsChunkPlugin({
            name: "primary",
            filename: 'primary.js'
        })

这工作得很好,但是由于Webpack 4中不推荐使用CommonsChunkPlugin,所以我不能使用它。

在加载primary.js和secondary.js之后,所有来自primary的代码都会重复,包括外部代码:

enter image description here

简化的webpack配置:

module.exports = {
    entry: {
        'primary': './Scripts/Src/primary.js',
        'secondary': './Scripts/Src/secondary.js',
    },
    output: {
        path: path.join(__dirname, 'Scripts/Dist'),
        filename: '[name].js',
        library: 'Name',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                primary: {
                    name: 'primary'
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
        ]
    }
}

是否可能仅将主要代码包含在单独的块中,以便次要对象作为主要代码的扩展而不重复代码?

0 个答案:

没有答案