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

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

代码拆分和延迟加载组件。就我而言，我通过使用代码拆分和延迟加载组件解决了问题。它使main.js变成很小的文件，并且在可见时会加载其他文件。查看this文章中有关代码拆分的知识，以及this中有关Vue.js中的延迟加载的知识。在React或Vue.js之类的库中，这是非常常见的方法。
优化库。没有太多添加，请检查是否有可能拉功能而不是整个库（如lodash）或使用本机实现而不是外部实现。未使用的 npm 也不会减轻您的主文件的负担。即使现在您没有太多软件包，将来对其进行优化也会有所作为。
缩小和丑化。最常见和最重要的实践不仅是出于性能原因，还因为安全性。这两个webpack插件是最受欢迎的webpack插件：
- UglifyJS-用于JS
- MiniCSS-适用于CSS
Webpack优化。 Webpack知道成千上万的技巧来使您的包更小，但它有时可能是您的错误朋友。记住要定义如何解决某些依赖关系，例如通过指向正确的node_module或库。看起来很像，lodash的别名为我节省了很多 kBs 。

解决：{ 模组：['app'，'node_modules']，扩展名：[ '.js'， ]， mainFields：[ “浏览器”， ]，别名：{ 'lodash-es'：'lodash' } }
负责任的代码。

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

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

如果要进行某种调整，请查看docs。交互式报告很棒。

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

2 个答案: