webpack 性能优化

作者: 事在人为s | 来源:发表于2020-04-13 22:00 被阅读0次

优化构建速度(可用于生产环境)

  1. 优化babel-loader(明确打包范围范围、排除范围)
  2. IngorePlugin(避免某些模块引用,减小体积)
  3. noParse (避免打包某些东西,提高打包速度)
  4. happyPack 多进程打包js,提高速度
  5. ParallelUglifyPlugin 多进程压缩代码,只用于生产环境

优化构建速度(不可用于生产环境)

  1. 自动刷新
  2. 热更新
  3. DiiPlugin

优化产出代码

思路
  1. 体积更小
  2. 合理分包,不重复加载
  3. 速度更快、内存使用更少
做法
  1. 小图片base64编码
  2. bundle加hash (产出文件后缀加hase8位,缓存)
  3. 懒加载(import语法 返回promise对象,和vue异步组件、路由原理一样)
  4. 提取公共代码
  5. IngorePlugin
  6. 使用cdn加速
  7. 使用production 自动压缩代码
  8. Scope Hosting

相关文章

网友评论

    本文标题:webpack 性能优化

    本文链接:https://www.haomeiwen.com/subject/ffyomhtx.html