webpack构建体积和构建速度分析统计

1、stats: 构建的统计信息
学到了:
一、初级分析:webpack 内置的 stats
package.json 中使用 stats
"build:stats": "webpack --config webpack.prod.js --json > stats.json",

二、Node.js 中使用
const webpack = require('webpack');
webpack (config,(err,stats)={
})

三、速度分析:使用 speed-measure-webpack-plugin

可以看到每个 loader 和插件执行耗时

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasureWebpackPlugin();
const webpackConfig= smp.wrap({
plugins:[
new Myplugin(),
new MyotherPlugin()
]
})
速度分析插件作用
分析整个打包总耗时 
每个插件和loader的耗时情况
四、webpack-bundle-analyzer 分析体积
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [new BundleAnalyzerPlugin()]
构建完成后会在 8888 端口展示大小

可以分析哪些问题?
依赖的第三方模块文件大小 
业务里面的组件代码大小
五、使用高版本的 webpack 和 Node.js
构建时间降低了 60%-98%!
六、使用 webpack4:优化原因
V8 带来的优化(for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf)
默认使用更快的 md4 hash 算法
webpacks AST 可以直接从 loader 传递给 AST,减少解析时间
使用字符串方法替代正则表达式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值