在之前工作的地方, 我们一直使用 webpck 去构建. 但是, 经过长达四年的更新迭代, 每个人都在同一个项目中做了不同的操作和更新, 这导致我们生产构建时间达到了惊人的一分半, watch 模式的 rebuild 也达到了 14 秒之久.
这导致你每次保存代码都需要等待漫长的 14 秒之久.
有几个小技巧可以是构建时间从一分半骤降至 20 秒, rebuild 骤降到 1 秒左右.
smp
在此之前, 我们需要有一个量化的指标证明我们做的是有意义的. 这时候 speed-measure-webpack-plugin 就派上用场. 它可以测量各个插件和 loader 的使用时间, 量化指标.
根据官网的教程, 用 smp 包裹 webpack 配置后, 执行构建, 会得到如下的信息:
WX20200115-163558.PNG
我们可以从中得到优化后的时间和具体每个插件和 loaders 所花时间.
cache-loader
添加完 SMP 后, 我们要处理的第一个问题就是初始化构建的时间(这里指的是首次构建之后 w,ebpack 再次构建所花费的时间), 这里引入我们所需的第一个 loader:cache-loader
cache-loader 是一个将之前的结果缓存到硬盘 (数据库) 的 loader, 意味着下一次执行 webpack 的时候, 会有很显著显著的提升.
demo 如下:
- {
- rules: [
- {
- test: /\.jsx?$/,
- use: [
- 'cache-loader',
- 'babel-loader',
- ],
- },
- {
- test: /\.SCSS$/,
- use: [
- 'style-loader',
- 'cache-loader',
- 'css-loader',
- 'postcss-loader',
- 'sass-loader',
- ],
- },
- ]
- }
增加后, 我们能过省去大约 75 秒的首次构建时间. 接下来, 让我们处理 rebuild 时间, 更新 devtool 就能达到比较明显的效果.
webpack source maps
在 webpack 的配置中, 我们可以找到一个 devtool 的配置, 根据文档所示, 它可以让我们:
选择一种风格的 source map 去增强 debugger 能力. 不过这个功能会影响 build 和 rebuild 的速度.
换句话说, 改变这个配置, 你会得到对应的 source maps 结果, 并且更重要的是, 它会影响你得到 bundle 的等待时间.
根据使用经验来合理配置 devtool, 我们可以改变 devtool 的值从最慢的 source-map -> eval-sourcemap, 这个操作让我们把时间从 14 秒减少到 3.5 秒.
- {
- devtool: process.env.NODE_ENV === 'development'
- ? 'eval-source-map'
- : 'source-map'
- }
文档上还有很多值. 你可以选择最适合你的哪一种.
transpile
另外, 现在浏览器已经支持了大部分的最新语法和 API, 在开发环境中, 我们并不需要那种完美的打包方案, 比如下面这样:
- module.exports = {
- presets: [
- [
- '@babel/preset-env',
- {
- targets: [
- 'last 1 chrome version',
- 'last 1 safari version',
- 'last 1 firefox version',
- ].join(','),
- },
- ],
- ],
- // ...
- }
上面三个简单的技巧, 可以显著的减少构件时间, 提升开发体验.
来源: http://www.jianshu.com/p/e536be3cbf1f