單頁面應用優化之路一webpack-bundle-analyzer

 

         這里我們先介紹一個工具，或者說一個插件，webpack-bundle-analyzer可視化資源分析工具
         這個工具可以指導我們優化那些大體積的組件，去除那些引但未使用的組件，等

        1 、安裝

        npm install --save-dev webpack-bundle-analyzer


        2 、配置


        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

        module.exports = {

          plugins: [

            new BundleAnalyzerPlugin()

          ]

    }

        3 、執行
    
        命令：cross-env NODE_ENV=production npm_config_report=true npm run build  （cross-env 跨平台，按需使用）


        執行完成后系統會默認在瀏覽器中打開127.0.0.1:8888


        4 、 效果




        5 、 擴展

    new BundleAnalyzerPlugin({ 
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器將啟動HTTP 服務器來顯示軟件包報告。
// 在“靜態”模式下，會生成帶有報告的單個HTML文件。
// 在`disabled`模式下，你可以使用這個插件來將`generateStatsFile`設置為`true`來生成Webpack Stats JSON文件。 
analyzerMode: 'server', // 將在“服務器”模式下使用的主機啟動HTTP服務器。 
analyzerHost: ' 127.0.0.1', // 將在“服務器”模式下使用的端口啟動HTTP服務器。 
analyzerPort: 8888, // 路徑捆綁，將在`static`模式下生成的報告文件。 
// 相對於捆綁輸出目錄。 
reportFilename: 'report.html', // 模塊大小默認顯示在報告中。 
// 應該是`stat`，`parsed`或者`gzip`中的一個。 
// 有關更多信息，請參見“定義”一節。 
defaultSizes: 'parsed', // 在默認瀏覽器中自動打開報告
openAnalyzer: true, // 如果為true，則Webpack Stats JSON文件將在bundle輸出目錄中生成 
generateStatsFile: false, // 如果`generateStatsFile`為`true`，將會生成Webpack Stats JSON文件的名字。 // 相對於捆綁輸出目錄。 
statsFilename: 'stats.json', // stats.toJson（）方法的選項。 
// 例如，您可以使用`source：false`選項排除統計文件中模塊的來源。
// 在這里查看更多選項：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21 
statsOptions: null, 
logLevel: 'info' //日志級別。可以是'信息'，'警告'，'錯誤'或'沉默'。
})

增加 Build Analysis 鏈接地址，各種分析工具的鏈接 
https://survivejs.com/webpack/optimizing/build-analysis/