如何优化 main.js 的大小？

Question

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

我有任何包裹。但是在创建空应用程序后，我的 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 来检查包大小对最终构建的影响

Answer 2

有多种方法可以优化您的主文件和应用程序性能。它们都有效，但有些可能不适合您的情况。

1. 代码拆分和延迟加载组件。 就我而言，我通过使用代码拆分和延迟加载组件解决了问题。 它将 main.js 变成了一个非常小的文件，并且其他文件在可见时被加载。 查看 this 关于代码拆分的文章和 this 关于 Vue.js 中的延迟加载的文章。这是 React 或 Vue.js 等库中非常常见的方法。

2. 优化库。没什么可补充的，检查是否可以拉函数而不是整个库（如在 lodash 中）或使用本机实现而不是外部实现。未使用的 npms 也不会使您的主文件更轻。即使现在您没有太多的软件包，将来优化它们也会有所作为。

3. 缩小和丑化。最常见和最重要的做法不仅是因为性能原因，还因为安全性。这两个 webpack 插件是最流行的 webpack 插件：

   • UglifyJS - 用于 JS
   • MiniCSS - 用于 CSS

4. Webpack 优化。 Webpack 知道数以千计的技巧如何让你的包更小，但有时它可能是你的假朋友。请记住定义如何解决一些依赖关系，例如通过指向正确的 node_module 或库。看起来，lodash 的别名为我节省了很多 kBs。

   解决：{ 模块：['app'，'node_modules']， 扩展名：[ '.js', ], 主要字段：[ '浏览器', ], 别名：{ 'lodash-es': 'lodash' } }

5. 负责任地编写代码。

了解您的问题的最佳方法是分析 main.js，您可以通过将 Bundle Analyzer Plugin 添加到您的 webpack 配置到插件中来实现它。它应该看起来像：

new BundleAnalyzerPlugin({
    reportFilename: 'report.html',
    analyzerMode: 'static'
  })

如果您想以某种方式调整它，请查看docs。交互式报告很棒。