webpack 构建速度和体积优化策略

47 初级分析：使用webpack内置stats

Node.js使用

48 速度分析： 使用speed-measure-webpack-plugin

重点关注红色部分，关注哪些执行比较慢，考虑哪些可以并行，是否有速度快可替代插件，是否可以优化插件

速度分析插件作用

分析整个打包总耗时，每个插件和loader的耗时情况

49 体积分析：使用webpack-bundle-analyzer

面积越大，代表体积越大，想办法只引入想要的功能

可以分析哪些问题

依赖的第三方模块文件大小，业务里面的组件代码大小

50 使用高版本的webpack和Node.js

解决速度优化问题

使用webpack4:优化原因

• V8带来的优化（for of代替forEach、Map和Set代替Object、includes代替indexOf）
• 默认使用更快的md4 hash算法
• webpacks AST可以直接从loader传递给AST，减少解析时间
• 使用字符串方法代替正则表达式

参考

程柳锋 《极客时间》《玩转webpack》47-50讲