性能优化篇之Webpack构建速度优化的建议-创新互联

如何输出Webpack构建分析

输出Webpack构建信息的.json文件：webpack --profile --json > stats.json

1. --profile:记录构建中的耗时信息
2. --json:以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息）

web可视化查看构建分析：得到了webpack构建信息文件stats.json，如何进行很好的可视化查看？

1. 方案一：通过可视化分析工具Webpack Analyse，是个在线Web应用，上传stats.json文件就可以；不过好像需要翻墙；
2. 方案二：安装webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer,生成stats.json后直接在其文件夹目录执行webpack-bundle-analyzer后，浏览器会打开对应网页并展示构建分析webpack-bundle-analyzer stats.json -p 8888文档地址webpack-bundle-analyzer
3. webpack-dashboard是一款统计和优化webpack日志的工具，可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表
4. jarvis是一款基于webapck-dashboard的webpack性能分析插件，性能分析的结果在浏览器显示，比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
 })
];