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 的实现原理其实很简单:分析出模块之间的依赖关系,尽可能将打散的模块合并到一个函数中,前提是不能造成代码冗余。 因此「只有那些被引用了一次的模块才能被合并」。