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

一、webpack 开发环境性能优化

1. 优化打包构建速度可以采用 HMR，热模块替换。当一个模块发生变化的时候，如果采用 HMR，只有变化的那个模块才发生打包，其余的模块不打包，是使用缓存。如果未采用 HMR，那么当一个模块发生变化，所有的模块都会打包，构建打包速度是非常慢。所以，使用HMR 能够极大的提升打包速度。

2. 优化代码调试可以采用 source-map。source-map 是 提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误，类型如下所示：

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

二、webpack 生产环境性能优化

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

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

2. 优化代码运行的性能可以采用 文件资源缓存、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 缓存，可以让用户体验非常好，离线也可以访问，但是兼容性问题较多。