性能优化篇之Webpack构建速度优化的建议-创新互联
如何输出Webpack构建分析
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的鸠江网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!输出Webpack构建信息的.json文件:webpack --profile --json > stats.json
--profile
:记录构建中的耗时信息--json
:以json格式输出构建结果,最后只输出一个json文件(包含所有的构建信息)
web可视化查看构建分析:得到了webpack构建信息文件stats.json,如何进行很好的可视化查看?
- 方案一:通过可视化分析工具Webpack Analyse,是个在线Web应用,上传stats.json文件就可以;不过好像需要翻墙;
- 方案二:安装
webpack-bundle-analyzer
工具npm i -g webpack-bundle-analyzer
,生成stats.json后直接在其文件夹目录执行webpack-bundle-analyzer
后,浏览器会打开对应网页并展示构建分析webpack-bundle-analyzer stats.json -p 8888
文档地址webpack-bundle-analyzer - webpack-dashboard是一款统计和优化webpack日志的工具,可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表
- 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 }) ];
网页名称:性能优化篇之Webpack构建速度优化的建议-创新互联
当前URL:http://myzitong.com/article/cspehh.html