用于生产和开发的不同块

Question

我有webpack@4.30.0个项目。 在开发模式webpack --mode=development中，所有文件均为7MB。 但是，当我切换到生产模式webpack --mode=production时，它们为27MB：/ Webpack正在以不同的方式分割文件：/我具有相同的配置。如何解决？

以下是捆绑包地图： 发展

生产

这是我的webpack.config.js：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var GlobEntries = require('webpack-glob-entries');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

var entriesRest = {
    "style": "./assets/css/style.scss",
};

var entries = GlobEntries('./assets/js/entries/**/*.ts');

const outputDir = 'public';

const plugins = [
    new webpack.ProgressPlugin(),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        popper: 'popper',
        "window.popper": 'popper',
        Popper: 'popper',
        "window.Popper": 'popper',
        "L": 'leaflet',
        "window.L": 'leaflet',
    }),
    new MiniCssExtractPlugin({
        filename: '../css/style-[contenthash].css',
    }),
    new CleanWebpackPlugin(),
    new ManifestPlugin({
        fileName: '../../' + outputDir + '/manifest.json',
        generate: (seed, files) => {
            const entrypoints = new Set()
            files.forEach(
                (file) => ((file.chunk || {})._groups || []).forEach(
                    (group) => entrypoints.add(group)
                )
            )
            const entries = [...entrypoints]
            const entryArrayManifest = entries.reduce((acc, entry) => {
                const name = (entry.options || {}).name
                    || (entry.runtimeChunk || {}).name
                const files = [].concat(
                    ...(entry.chunks || []).map((chunk) => chunk.files)
                ).filter(Boolean)
                return name ? {...acc, [name]: files} : acc
            }, seed)
            return entryArrayManifest
        }
    }),
    new CopyWebpackPlugin([
        {from: 'node_modules/ckeditor', to: 'ckeditor'},
        {from: 'assets/img', to: '../img'},
        {from: 'assets/index.php', to: '../index.php'},
        {from: 'assets/cron-20min.php', to: '../cron-20min.php'},
        {from: 'assets/js/ads.js', to: '../js/ads.js'},
        {from: 'assets/.htaccess', to: '../[name].[ext]'},
    ]),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
];

module.exports = (argv, env) => {
    plugins.push(new BundleAnalyzerPlugin());

    return {
        plugins: [
            ...plugins,
        ],
        entry: Object.assign(entriesRest, entries),
        optimization: {
            splitChunks: {
                chunks: "all"
            },
        },
        devtool: env.mode === 'development' ? 'eval' : '',
        output: {
            path: path.resolve(__dirname, outputDir + "/js/"),
            filename: '[name]-[chunkhash].js',//-[hash:6]
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                {
                    test: /\.scss$/i,
                    include: [
                        path.resolve(__dirname, "assets/css/style.scss"),
                    ],
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it uses publicPath in webpackOptions.output
                                // publicPath: '../css/',
                                hmr: process.env.NODE_ENV === 'development',
                            },
                        },
                        'css-loader',
                        {
                            loader: 'postcss-loader', // Run postcss actions
                            options: {
                                plugins: function () { // postcss plugins, can be exported to postcss.config.js
                                    return [
                                        require('autoprefixer')
                                    ];
                                }
                            }
                        }, 'sass-loader'
                    ]
                },
                {
                    test: /\.scss$/i,
                    exclude: [
                        path.resolve(__dirname, "assets/css/style.scss"),
                    ],
                    loader: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/font-woff&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file-loader?name=../css/fonts/[name].[ext]"
                }, {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=../css/fonts/[name].[ext]"
                },
                {
                    test: /\.(jpe?g|png|gif|svg|cur)$/i,
                    loaders: [
                        'file-loader?hash=sha512&digest=hex&name=../img/[name].[ext]',
                        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                    ]
                },
                {test: /\.twig$/, loader: "twig-loader"}
            ]
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            alias: {
                'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui'),
            }
        }
    };
};

Answer 1

我想我知道这个问题。我在maxInitialRequests: 10标志中添加了optimization，现在它的拆分几乎相同。

optimization: {
            splitChunks: {
                chunks: "all",
                maxInitialRequests: 10,
            },
        },