javascript - 我如何优化 main.js 的大小？

Question

我有一个 Vue.JS 应用程序。我正在使用 webpack 创建它。应用程序构建后，我的 main.js 变大了。 (9 兆字节)。

我有任何包裹。但是在创建空应用程序后，我的 main.js 也变大了。我该如何解决这个问题？

Answer 1

您可以使用 uglifyjs-webpack-plugin、compression-webpack-plugin 来优化您的包大小。

这是我的完整 code

例子:

optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin()
    ],

所以UglifyJsPlugin 帮助你缩小和丑化js 代码。 CompressionPlugin 帮助您将 js 文件压缩为 gzip 扩展名。

但我建议您使用 webpack-bundle-analyzer 来检查包大小对最终构建的影响