0、写在前面
Webpack优化可以分为优化开发体验和优化输出质量两部分
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能更快的完成对多个文件的压缩工作。
-
-
优化使用体验。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。
-
4-5 使用自动刷新
使用webpack模块负责监听文件，webpack-dev-server模块则负责刷新浏览器。 - 4-6 开启模块热替换
-
4-5 使用自动刷新
2、优化输出质量
优化输出质量的目的是为了给用户呈现体验更好的网页，例如减少首屏加载时间、提升性能流畅度等。 这至关重要，因为在互联网行业竞争日益激烈的今天，这可能关系到你的产品的生死。
优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：
-
减少用户能感知到的加载时间，也就是首屏加载时间。
- 4-7 区分环境
- 4-8 压缩代码
- 4-9 CDN 加速
-
4-10 使用 Tree Shaking
Tree Shaking可以用来剔除JavaScript中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。 - 4-11 提取公共代码
- 4-12 按需加载
-
提升流畅度，也就是提升代码性能。
参考文章：
深入浅出 Webpack - 优化
