webpack分析与优化

webpack是当下常用的代码构建工具,对它进行优化可以提升工作效率和项目质量。

webpack是用来转换,生成代码的,要对它进行优化,主要还是从更快的工作和生成更小体积两个方面来进行考虑

更快的进行工作

speed-measure-webpack-plugin 测量时间

  • 减少要处理的文件
    • externals 从cdn引入文件
    • 缩小范围。include exclude
    • noprase 忽略第三方库
  • 开启缓存
    • babel,cache-loader,hard-source-webpack-plugin
    • 多进程 thread loader,webpack5 默认开始
  • 区分环境
    -本地话取消es6转码
    • 本地时取消压缩代码,抽取样式
    • sourcemap eval类型字符串,加速,cheap 没有列信息
    • 压缩登在本地不需要
  • dll编译,cdn [DllReferencePlugin
  • 指定路径,减少查找时间
    • resolve.modules
    • alias,指定min.js而不是重新编译

生成更小体积的代码

webpack-bundle-analyzer

  • 去掉没有用到的代码
  • tree shaking
  • 改用cdn
  • uglifyjs
  • Scope Hoisting 让代码尽可能放到统一函数,Scope Hoisting 的实现原理其实很简单:分析出模块之间的依赖关系,尽可能将打散的模块合并到一个函数中,前提是不能造成代码冗余。 因此「只有那些被引用了一次的模块才能被合并」。
支持作者

如果我的文章对你有帮助,欢迎 关注和 star 本博客 或是关注我的 github,获取更新通知。欢迎发送邮件到hpoenixf@foxmail.com与作者交流