webpack 手摸手学习系列之性能优化的总结

痛定思痛。 2023-02-14 02:14 30阅读 0赞

#### 一、webpack 开发环境性能优化 ####

1.  优化打包构建速度可以采用 `HMR`，热模块替换。当一个模块发生变化的时候，如果采用 `HMR`，只有变化的那个模块才发生打包，其余的模块不打包，是使用缓存。如果未采用 `HMR`，那么当一个模块发生变化，所有的模块都会打包，构建打包速度是非常慢。所以，使用`HMR` 能够极大的提升打包速度。
2.  优化代码调试可以采用 `source-map`。`source-map` 是 提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误，类型如下所示：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>类型描述</th> 
   <th>类型方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>source-map</td> 
   <td>错误代码准确信息和源代码的错误位置</td> 
   <td>外部</td> 
  </tr> 
  <tr> 
   <td>inline-source-map</td> 
   <td>只生成一个内联source-map，错误代码准确信息和源代码的错误位置</td> 
   <td>内联</td> 
  </tr> 
  <tr> 
   <td>hidden-source-map</td> 
   <td>错误代码错误原因，但是没有错误位置，不能追踪源代码错误，只能提示到构建后代码的错误位置</td> 
   <td>外部</td> 
  </tr> 
  <tr> 
   <td>eval-source-map</td> 
   <td>每一个文件都生成对应的source-map，都在eval，错误代码准确信息 和源代码的错误位置</td> 
   <td>内联</td> 
  </tr> 
  <tr> 
   <td>nosources-source-map</td> 
   <td>错误代码准确信息, 但是没有任何源代码信息</td> 
   <td>外部</td> 
  </tr> 
  <tr> 
   <td>cheap-source-map</td> 
   <td>错误代码准确信息 和 源代码的错误位置，只能精确的行</td> 
   <td>外部</td> 
  </tr> 
  <tr> 
   <td>cheap-module-source-map</td> 
   <td>错误代码准确信息 和 源代码的错误位置，module会将loader的source map加入</td> 
   <td>外部</td> 
  </tr> 
 </tbody> 
</table>

#### 二、webpack 生产环境性能优化 ####

1.  优化打包构建速度可以采用 `oneOf`、`babel` 缓存、多进程打包、`externals` 和 `dll`，如下所示：

*  `oneOf` 是在以下的 `loader` 只会匹配一个，不会匹配多次，只会执行一次，避免多次重复执行。注意的是，不能有两个配置处理同一种类型文件，如果有，就需要单独提取出来。
 *  `babel` 缓存更有利于 js 文件的处理，让第二次打包构建速度更快。
 *  多进程打包是同一时间可以做多件事，让打包效率更快一些，提升打包速度
 *  `externals` 是忽略第三方库的打包，声明哪些库不需要打包，然后通过 `CDN` 引入。在构建项目的时候，将第三方的包进行移除打包，可以极大的提示打包的构建速度，更加适用于 `CDN` 打包。
 *  `dll` 是先将第三方库打包后，然后使用的时候，就可以使用这些打包好的第三方库。`dll` 和 `code split` 效果更佳，进行代码的分割，实现更加细入化的分割。

1.  优化代码运行的性能可以采用 文件资源缓存、`````tree shaking````code split`````、懒加载与预加载和 `PWA`，如下所示：

*  文件资源缓存分为 `hash`、`chunkhash` 和 `contenthash`，让代码上线运行缓存更好使用。 `hash` 是每次`wepack`构建时会生成一个唯一的`hash`值。`chunkhash` 是根据`chunk`生成的`hash`值，如果打包来源于同一个`chunk`，那么`hash`值就一样。`contenthash` 是根据文件的内容生成 `hash` 值。不同文件 `hash` 值一定不一样。
 *  `tree shaking` 是树摇优化。我们可以把 `webpack` 看出是一棵树，那些有用的代码就是树上绿色鲜活的树叶，而那些没用的代码就是枯萎的树叶，树摇就是将那些枯萎的树叶摇下来。所以 `tree shaking` 的本质是去除无用代码，但是前提是必须使用 `ES6` 模块化和开启 `production` 环境。
 *  `code split` 是代码分割，分为单页面应用和多页面应用。如果是单页面应用，那么只有一个 `bundle` 输出文件。如果是多页面应用，那么会有多个 `bundle` 输出文件。
 *  懒加载和预加载。懒加载是当文件需要使用时才加载，预加载是会在使用之前，提前加载 `js` 文件，也是等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。
 *  `PWA` 是渐进式网络开发应用程序，通过 `workbox-webpack-plugin` 插件注册 `serviceWorker`和 `cache` 缓存，可以让用户体验非常好，离线也可以访问，但是兼容性问题较多。