24_webpack_打包分析
2024-09-08 18:49:38
一、打包时间的分析
如果我们希望看到每一个loader和plugin消耗的打包时间,可以借助于一个插件:speed-measure-webpakc-plugin
安装:npm i speed-measure-webpack-plugin -D
使用:
// 测量打包时间的插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin(); module.exports = function (env) {
isProduction = env.production;
process.env.NODE_ENV = isProduction ? "production" : "development";
return smp.wrap(
isProduction
? merge(commonConfig, prodConfig)
: merge(commonConfig, devConfig)
);
};
这个插件是有兼容性问题的
如 mini-css-extract-webpack-plugin
怎么解决这个问题?npm i mini-css-extract-webpack-plugin@1.3.6
那么再次npm run build 的时候就可以看到每个插件、loader耗时是多少
二、打包后文件分析
在package.json中的scripts中加入一个脚本
"stats":"webpack --config ./config/webpack.common.js --env production --profile --json=stats"
将打包后的文件生成一个档案,以json格式生成,名字叫stats
通过指向npm run stats可以得到一个stats.json的文件
但是单单阅读这个文件其中的信息并不是显而易见
可以放到:http://webpack.github.io/analyse,进行分析
或者使用webpack-bundle-analyzer
npm i webpack-bundle-analyzer -D
// 打包大小分析的插件
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); plugins:[
new BundleAnalyzerPlugin()
]
当你npm run build 的时候,它会自动打开一个本地服务
最新文章
- Elasticsearch 全教程
- NK3C系统中ID的汉语名称
- bzoj3283: 运算器
- 英特尔® 实感™ SDK R4 (v.6.0) 的全新特性
- sql多表删除
- firefox 对WebRTC支持
- python 计算两个日期相差多少个月
- python——字符串 &; 正则表达
- 理解AngularJS中的依赖注入
- python爬虫requests 下载图片
- PowerBi利用Python Script绕过ODBC来导入MongoDB数据
- C++二分图匹配基础:zoj1002 FireNet 火力网
- autoMapper的介绍
- 关于RabbitMQ服务器整合(二)
- 解析Service之你需要了解的一些东东
- LVS+Heartbeat 高可用集群方案操作记录
- hdu1238 Substrings 扩展KMP
- 部署mysql后,无法设置用户远程登陆(%只所有用户,不可以,只能给指定的ip?)
- error C2039: &#39;SetDefaultDllDirectories&#39;错误解决办法<;转>;
- /etc/rc5.d/s991local: line25: eject:command not found错误