單頁面應用優化之路一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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM