如何輸出Webpack構(gòu)建分析

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鳩江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

輸出Webpack構(gòu)建信息的.json文件：webpack --profile --json > stats.json

1. --profile:記錄構(gòu)建中的耗時(shí)信息
2. --json:以json格式輸出構(gòu)建結(jié)果，最后只輸出一個(gè)json文件（包含所有的構(gòu)建信息）

web可視化查看構(gòu)建分析：得到了webpack構(gòu)建信息文件stats.json，如何進(jìn)行很好的可視化查看？

1. 方案一：通過可視化分析工具Webpack Analyse，是個(gè)在線Web應(yīng)用，上傳stats.json文件就可以；不過好像需要翻墻；
2. 方案二：安裝webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer,生成stats.json后直接在其文件夾目錄執(zhí)行webpack-bundle-analyzer后，瀏覽器會(huì)打開對(duì)應(yīng)網(wǎng)頁并展示構(gòu)建分析webpack-bundle-analyzer stats.json -p 8888文檔地址webpack-bundle-analyzer
3. webpack-dashboard是一款統(tǒng)計(jì)和優(yōu)化webpack日志的工具，可以以表格形勢展示日志信息。其中包括構(gòu)建過程和狀態(tài)、日志以及涉及的模塊列表
4. jarvis是一款基于webapck-dashboard的webpack性能分析插件，性能分析的結(jié)果在瀏覽器顯示，比webpack-bundler-anazlyer更美觀清晰GitHub文檔地址

npm i -D webpack-jarvis

webpack.config.js配置：

const Jarvis = require("webpack-jarvis");

plugins: [
 new Jarvis({
  watchOnly: false,
  port: 3001 // optional: set a port
 })
];

分享題目：性能優(yōu)化篇之Webpack構(gòu)建速度優(yōu)化的建議-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/cspehh.html