webpack性能优化

这篇文章介绍了webpack在生产环境和开发环境如何做一些性能方面的优化,主要从打包速度,代码调试,代码运行性能几个方面介绍,只是概念性的描述,并没有贴很多代码,不足的地方请多多指教,谢谢~

开发环境性能优化

• 优化打包构建速度
  • HMP 模块热替换
• 优化代码调试
  • source-map 增加代码映射关系,当程序报错时可以直接定位到错误信息对应文件 列

生产环境性能优化

• 优化打包构建速度
  • oneOf 配置loader规则的时候,应该把处理不同文件的loader规则放在oneOf中,这样的好处是当对应文件与loader规则匹配上的时候不会继续向下运行,但是需要注意的时oneOf中不可以出现两个loader规则处理同一个类型的文件,如果出现这种情况,需要将优先级高的loader规则提取出去
  • babel缓冲 第二次打包构建速度更快
  • 多进程打包 webpack默认打包是单进程的 , 当应用程序文件非常多并且复杂的时候打包会花费很多时间,这个时候可以考虑使用多进程打包thread-loader.[注]多进程:每个进程启动 , 进程之间的通信是有时间开销的
  • external dll这是两个技术,大方向都是用来指定某些文件不需要打包
• 优化代码运行的性能
  • 缓存(hash-chunkhash-contenthash)
    • hash:webpack每一次打包都会生成一个唯一hash,如果将次hash作文文件后缀名,缓冲将失效,每次打包所有文件都将 被重新赋予新的hash , 即时有一些文件没有被更新
    • chunkhash:来自同一个chunk的文件有变化的时候,chunkhash会更新,打包的时候同一个入口的文件就属于同一个chunk,这样更新还是不够细致
    • contenthash: 真正的某一个文件中的代码发生改变,该文件对应的contenthash才会发生改变 , 所以项目中去除缓存通常使用contenthash
  • tree shaking 打包的时候摇掉你的程序中没有使用的代码 , 代码体积更小 , 前提①需要开启ES6 module ②生产环境
  • code split 代码分割,大部分情况下我们写的项目都是单页面,即单入口,随着项目不断完善,项目文件也会增多,如果将所有js文件打包成一个js文件的话,部署上线后加载一定是比较耗时间的,这时候我们需要对代码进行分割打包,通过webpack配置optimization分割node_modules的代码,通过import引入js文件的形式分割指定的代码,组成单入口项目代码分割的方案
  • 懒加载/预加载 懒加载:触发的时候加载,不触发不加载 , 预加载:浏览器空闲的时候加载
  • pwa 离线可访问技术