参考:https://www.jianshu.com/p/809958a504b8
一、减少webpack打包后的文件体积
-
按需加载【这个不是减少打包后的体积,而是运行时加载文件的体积减少了】
如:将每个路由页面单独打包为一个文件
component: () =>
import(/* webpackChunkName: "home" */ '../pages/home/Home'),
webpack按需加载原理:https://juejin.cn/post/6850418111599165448
js的懒加载,最后的实现都是要通过script标签实现的。webpack的懒加载也是一样
-
压缩js、html、css文件
-
对图片就像压缩和优化【合并】
- Scope Hoisting:Scope Hoisting会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去。
- Tree Shaking
二、构建速度优化【减少webpackd打包时间】
- 优化 loader 的文件搜索范围【babel-loader构建时间过长,限定加载器作用范围】
- 缓存加载器执行结果
正因为babel-loader在解析转换上耗时太长,所以我们希望能缓存每次执行的结果。webpack的loader中刚好有 cacheDirectory 的选项,默认为false。 开启后将使用缓存的执行结果,打包速度明显提升。下次只需要编译更改过的代码文件即可
- resolve 解析优化
resolve 是依赖解析,依赖体现的就是文件路径的引用。即 文件路径解析。
-
当项目中出现 import ‘react’ 既不是绝对路径也不是相对路径时,指定好搜索的路径,可以不用过多的查询
-
尽可能少的使用 resolve.alias 来设置路径别名,因为会影响到tree shaking 的优化
-
后缀自动补全尽可能的少。减少路径查询的工作
-
当使用的第三方库过大,并且不包含import require define 的调用。可以使用noParse让库不被loaders 解析
- 使用多线程处理打包:
HappyPack插件:能够让Webpack
把打包任务分解给多个子线程去并发的执行,子线程处理完后再把结果发送给主线程。
三、分包【即提取公共代码】