Webpack优化

0、写在前面

Webpack优化可以分为优化开发体验和优化输出质量两部分

1、优化开发体验

优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点：

1. 优化构建速度。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。

   • 4-1 缩小文件搜索范围

     • 4-1-1 在配置 Loader 时通过 include 去缩小命中范围
       

       

     • 4-1-2 优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找，配置如下：
       

       

     • 4-1-3 优化 resolve.mainFields 配置

     • 4-1-4 优化 resolve.alias 配置

     • 4-1-5 优化 resolve.extensions 配置
       在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：

       • 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
       • 频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
       • 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require('./data') 写成 require('./data.json')。
         

     • 4-1-6 优化 module.noParse 配置

   • 4-2 使用 DllPlugin
     为什么给 Web 项目构建接入 动态链接库 的思想后，会大大提升构建速度呢？ 原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。 由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译。

   • 4-3 使用 HappyPack
     在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。（运行在 Node.js 之上的 Webpack 是单线程模型的）
     HappyPack的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。

   • 4-4 使用 ParallelUglifyPlugin
     ParallelUglifyPlugin 会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS去压缩代码，但是变成了并行执行。 所以 ParallelUglifyPlugin 能更快的完成对多个文件的压缩工作。

2. 优化使用体验。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。

   • 4-5 使用自动刷新
     使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。
   • 4-6 开启模块热替换

2、优化输出质量

优化输出质量的目的是为了给用户呈现体验更好的网页，例如减少首屏加载时间、提升性能流畅度等。 这至关重要，因为在互联网行业竞争日益激烈的今天，这可能关系到你的产品的生死。

优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：

1. 减少用户能感知到的加载时间，也就是首屏加载时间。

   • 4-7 区分环境
   • 4-8 压缩代码
   • 4-9 CDN 加速
   • 4-10 使用 Tree Shaking
     Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
   • 4-11 提取公共代码
   • 4-12 按需加载

2. 提升流畅度，也就是提升代码性能。

   • 4-13 使用 Prepack
   • 4-14 开启 Scope Hoisting

参考文章：
深入浅出 Webpack - 优化