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

Question

我有一個Vue.JS應用程序。 我正在使用webpack創建它。 應用程序構建后，main.js的大小越來越大。 （9 Mb）。

我有任何包裹。 但是在創建空應用程序后，main.js也變得很大。 我該如何解決這個問題？

Answer 1

您可以使用uglifyjs-webpack-plugin，compression-webpack-plugin來優化捆綁包的大小。

這是我的完整代碼

例：

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變成很小的文件，並且在可見時會加載其他文件。 查看該文章有關代碼分裂和這一個關於Vue.js.延遲加載 在React或Vue.js之類的庫中，這是非常常見的方法。

2. 優化庫 。 沒有太多添加，請檢查是否有可能拉功能而不是整個庫（如lodash）或使用本機實現而不是外部實現。 未使用的npm s也不會減輕主文件的負擔。 即使現在您沒有太多軟件包，將來對其進行優化也會有所作為。

3. 縮小和丑陋 。 最常見和最重要的實踐不僅是出於性能原因，還因為安全性。 這兩個webpack插件是最流行的webpack插件：

   • UglifyJS-用於JS
   • MiniCSS -CSS

4. Webpack優化 。 Webpack知道成千上萬的技巧來使您的包更小，但它有時可能是您的錯誤朋友。 記住要定義如何解決某些依賴關系，例如通過指向正確的node_module或庫。 看起來像lodash的別名為我節省了很多kB 。

   解析：{模塊：['app'，'node_modules']，擴展名：['.js'，]，mainFields：['瀏覽器'，]，別名：{'lodash-es'：'lodash'}}

5. 負責任地編碼 。

理解問題的最好方法是分析main.js，可以通過將Bundle Analyzer插件添加到插件中的webpack配置中來實現。 它看起來應該像這樣：

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

如果您想以某種方式進行調整，請查看文檔 。 互動報告很棒。