文章目录
1. 优化开发体验1.1 优化构建速度1.1.1 缩小文件搜索范围1.1.2 使用 DllPlugin1.1.3 使用 HappyPack1.1.4 使用 ParallelUglifyPlugin
1.2 优化使用体验1.2.1 使用自动刷新1.2.2 开启模块热替换
2. 优化输出质量2.1 减少用户能感知到的加载时间2.1.1 区分环境2.1.2 压缩代码2.1.3 CDN 加速2.1.4 使用 Tree Shaking2.1.5 提取公共代码2.1.6 按需加载
2.2 提升流畅度2.2.1 使用 Prepack2.2.2 开启 Scope Hoisting
Webpack优化可以分为
优化开发体验 和
优化输出质量 两部分
1. 优化开发体验
优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点：
1.1 优化构建速度
在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。
1.1.1 缩小文件搜索范围
详情
1.1.2 使用 DllPlugin
详情
1.1.3 使用 HappyPack
详情
1.1.4 使用 ParallelUglifyPlugin
详情
1.2 优化使用体验
通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。
1.2.1 使用自动刷新
详情
1.2.2 开启模块热替换
详情
2. 优化输出质量
优化输出质量的目的是为了给用户呈现体验更好的网页，例如减少首屏加载时间、提升性能流畅度等。 这至关重要，因为在互联网行业竞争日益激烈的今天，这可能关系到你的产品的生死。
优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：
2.1 减少用户能感知到的加载时间
也就是首屏加载时间
2.1.1 区分环境
详情
2.1.2 压缩代码
详情
2.1.3 CDN 加速
详情
2.1.4 使用 Tree Shaking
详情 Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
2.1.5 提取公共代码
详情
2.1.6 按需加载
按需加载
2.2 提升流畅度
也就是提升代码性能。
2.2.1 使用 Prepack
详情
2.2.2 开启 Scope Hoisting
详情
