Webpack生产版本-捆绑文件太大

Question

这周我花时间了解了webpack捆绑器，并为开发和生产环境配置了自定义版本。

我以这个存储库（https://github.com/samteb/angular-7-webpack-4-boilerplate）为起点。然后我升级了依赖关系并配置了eslint，jest等。

最后，我阅读了许多有关使用webpack进行包优化的精彩文章。尽管做了我的努力，但webpack仍然比CLI（ng build --prod）生成更大的捆绑文件，我不知道如何减少它。

Angular CLI：762 KB

Webpack：1,57 MB

我非常感谢您提供的所有帮助和建议。

Github存储库：https://github.com/aszidien/angular-webpack-build

webpack.config.common.js：

'use strict';

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');
const rootPath = path.resolve(__dirname, '..');

const webpack = require('webpack');
const isDev = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: {
        vendor: './src/vendor.ts',
        polyfills: './src/polyfills.ts',
        main: isDev ? './src/main.ts' : './src/main.aot.ts'
    },

    output: {
        path: path.resolve(rootPath, 'dist')
    },

    resolve: {
        extensions: ['.ts', '.js', '.scss']
    },

    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.ts$/,
                exclude: /(node_modules)/,
                loader: "eslint-loader",
                options: {
                    cache: false,
                    fix: false,
                    emitWarning: true,
                    emitError: true,
                    failOnWarning: true,
                    failOnError: true
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    {loader: 'style-loader', options: {sourceMap: isDev}},
                    {loader: 'css-loader', options: {sourceMap: isDev}},
                    {loader: 'sass-loader', options: {sourceMap: isDev}}
                ],
                include: path.resolve(rootPath, 'src', 'assets')
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    'to-string-loader',
                    {loader: 'css-loader', options: {sourceMap: isDev}},
                    {loader: 'sass-loader', options: {sourceMap: isDev}}
                ],
                include: path.resolve(rootPath, 'src', 'app')
            },
            {
                // TODO temporarily bug fix - System.import() is deprecated and will be removed soon
                test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                parser: {system: true},  // enable SystemJS
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),

        // TODO temporarily bug fix - Critical dependency: the request of a dependency is an expression
        new webpack.ContextReplacementPlugin(
            /[\/\\]@angular[\/\\]core[\/\\]fesm5/,
            path.resolve(rootPath, 'src'),
            {}
        )
    ]
};

webpack.config.prod.js：

'use strict';

const webpackMerge = require('webpack-merge');
const ngw = require('@ngtools/webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');

const commonConfig = require('./webpack.config.common');
const path = require('path');
const rootPath = path.resolve(__dirname, '..');

module.exports = webpackMerge(commonConfig, {
    mode: 'production',

    output: {
        path: path.resolve(rootPath, 'dist'),
        publicPath: '/',
        filename: '[hash].js'
    },

    optimization: {
        noEmitOnErrors: true,
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),

            new OptimizeCSSAssetsPlugin({
                cssProcessor: cssnano,
                cssProcessorOptions: {
                    discardComments: {
                        removeAll: true
                    }
                },
                canPrint: false
            })
        ]
    },

    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new ngw.AngularCompilerPlugin({
            tsConfigPath: path.resolve(rootPath, 'tsconfig.aot.json'),
            entryModule: path.resolve(rootPath, 'src', 'app', 'app.module#AppModule')
        })
    ]
});