共计 4135 个字符，预计需要花费 11 分钟才能阅读完成。
一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 前言 |
| 三 针对 Webpack 自身构建优化 |
| 3.1 优化 resolve.modules 配置 |
| 3.2 优化 resolve.extensions 配置 |
| 3.3 优化 resolve.include/exclude 配置 |
| 四 通过 Loader 和 Plugin 优化 |
| 4.1 缓存 |
| 4.2 多过程 |
| 4.3 多过程压缩 |
| 4.4 动态资源拆散 |
| 4.5 代码拆散 |
| 4.6 打包资源压缩 |
| 五 其余优化点 |
| 5.1 Tree Shaking |
| 5.2 Scope Hoisting |
| 5.3 按需加载 |
| 六 优化体验 |
| 七 参考文献 |
二 前言
返回目录
Webpack 的优化瓶颈，次要是 2 个方面：
- Webpack 的构建过程太花工夫
- Webpack 打包的后果体积太大
本文从这 2 个角度登程，收集一些相干优化材料。
三 针对 Webpack 自身构建优化
返回目录
3.1 优化 resolve.modules 配置
返回目录
resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块，默认是 ['node_modules']。
然而，它会先去当前目录的 ./node_modules 查找，没有的话再去 ../node_modules，最初到根目录 —— 即 npm 查找包的规定。
所以能够间接指定我的项目根目录，这样代码就不须要一层一层查找。
resolve: {modules: [path.resolve(__dirname, 'node_modules')],
}3.2 优化 resolve.extensions 配置
返回目录
在导入没带文件后缀的门路时，Webpack 会主动带上后缀去尝试询问文件是否存在，而 resolve.extensions 用于配置尝试后缀列表；默认为 extensions:['js', 'json']。
当遇到 require('./data') 时 Webpack 会先尝试寻找 data.js，没有再去找 data.json；如果列表越长，或者正确的后缀越往后，尝试的次数就会越多。
所以在配置时为晋升构建优化需恪守：
- 频率呈现高的文件后缀优先放在后面。
- 列表尽可能的少，例如只有 3 个：
js、jsx、json。 - 书写导入语句时，尽量写上后缀名。
3.3 优化 resolve.include/exclude 配置
返回目录
以 babel-loader 为例，能够通过 include 和 exclude 帮忙咱们防止 node_modules 这类宏大文件夹。
即通过 include 通知 Webpack 哪些咱们是须要检测的，通过 exclude 通知 Webpack 哪些咱们是不须要检测的（例如曾经拾掇过的动态资源）
四 通过 Loader 和 Plugin 优化
返回目录
4.1 缓存
返回目录
- cache-loader
在 babel-loader 开启 cache 后，将 loader 的编译后果写进硬盘缓存，再次构建如果文件没有发生变化则会间接拉取缓存。
uglifyjs-webpack-plugin
通过这个插件也能够解决缓存问题。
注：具体的要依据以后的
Webpack版本，Loader和Plugin示意Webpack每次更新都会淘汰一批没有跟进保护的Loader和Plugin。就跟大佬还在继续学习，你几年没学习之后，遇到金融危机被淘汰的危险就高了。
4.2 多过程
返回目录
因为有大量文件须要解析和解决，构建是文件读写和计算密集型的操作，特地是当文件数量变多后，Webpack 构建慢的问题会显得重大。
文件读写和计算操作是无奈防止的，那能不能让 Webpack 同一时刻解决多个工作，施展多核 CPU 电脑的威力，以晋升构建速度呢？
Happypack 能够将工作分解成多个子过程去并发执行，大大晋升打包效率。
除此之外 thread-loader 和 Happypack 一样，然而配置比较简单。
Happypack曾经不保护了。Github – Happypack
4.3 多过程压缩
返回目录
因为自带的 UglifyjsWebpackPlugin 压缩插件是单线程运行的，而 TerserWebpackPlugin 能够并发运行压缩性能（多过程）。
所以通过 TerserWebpackPlugin 代替自带的 UglifyjsWebpackPlugin 插件。
4.4 动态资源拆散
返回目录
通过 DllPlugin 或者 Externals 进行动态依赖包的拆散。
因为 CommonsChunkPlugin 每次构建会从新构建一次 vendor，所以出于效率思考，应用 DllPlugin 将第三方库独自打包到一个文件中，只有依赖本身产生版本变动时才会从新打包。
4.5 代码拆散
返回目录
在 Webpack 中，到底什么是代码拆散？代码拆散容许你把代码拆分到多个文件中。如果应用切当，你的利用性能会进步很多。因为浏览器能缓存你的代码。
每当你做出一次批改，蕴含批改的文件须要被所有拜访你网站的人从新下载。但你并不会常常批改利用的依赖库。
如果你能把那些依赖库拆分到齐全拆散的文件中，即便业务逻辑产生了更改，访问者也不须要再次下载依赖库，间接应用之前的缓存就能够了。
因为有了 SplitChunksPlugin，你能够把利用中的特定局部移至不同文件。如果一个模块在不止一个 chunk 中被应用，那么利用代码拆散，该模块就能够在它们之间很好地被共享。
4.6 打包资源压缩
返回目录
- JS 压缩：
UglifyjsWebpackPlugin - HTML 压缩：
HtmlWebpackPlugin - CSS 压缩：
MiniCssExtractPlugin - 图片压缩：
image-webpack-loader - Gzip 压缩：不包含图片
五 其余优化点
返回目录
5.1 Tree Shaking
返回目录
通过 ES6 的 import/export 来查看未援用代码，以及 sideEffects 来标记无副作用代码，最初用 UglifyJSPlugin 来做 Tree Shaking，从而删除冗余代码。
5.2 Scope Hoisting
返回目录
Scope Hoisting 是 Webpack3 的新性能，直译为 「作用域晋升」，它能够让 Webpack 打包进去的 「代码文件更小」，「运行速度更快」。
相熟 JavaScript 都应该晓得 「函数晋升」 和 「变量晋升」，JavaScript 会把函数和变量申明晋升到以后作用域的顶部。
「作用域晋升」 也相似于此，Webpack 会把引入的 js 文件“晋升到”它的引入者顶部。
Scope Hoisting 的实现原理其实很简略：剖析出模块之间的依赖关系，尽可能将打散的模块合并到一个函数中，前提是不能造成代码冗余。因而「只有那些被援用了一次的模块能力被合并」。
因为 Scope Hoisting 须要剖析出模块之间的依赖关系，因而源码「必须采纳 ES6 模块化语句」，不然它将无奈失效。起因和 Tree Shaking 中介绍的相似。
5.3 按需加载
返回目录
- 什么是 代码宰割 （code splitting）？
代码宰割是指：将脚本中无需立刻调用的代码在代码构建时转变为异步加载的过程。
在 Webpack 构建时，会防止加载已申明要异步加载的代码，异步代码会被独自拆散出一个文件，当代码理论调用时被加载至页面。
代码宰割技术的外围是 异步加载资源 。
可喜的是，浏览器容许咱们这么做，W3C stage 3 标准：whatwg/loader 对其进行了定义：你能够通过 import() 关键字让浏览器在程序执行时异步加载相干资源。
在 Vue 中，能够间接应用 import() 关键字做到这一点，而在 React 中，你须要应用 react-loadable 去实现同样的事。
六 优化体验
返回目录
- progress-bar-webpack-plugin：在终端底部，将会有一个构建的进度条，能够让你清晰的看见构建的执行进度。
- webpack-build-notifier：在构建实现时，可能像微信、Lark 这样的 APP 弹出音讯的形式，提醒构建曾经实现。
- webpack-dashboard：对 Webpack 原始的构建输入不称心的话，也能够应用这样一款 Plugin 来优化你的输入界面。
- speed-measure-webpack-plugin：该插件能够测量各个插件和
loader所破费的工夫。 webpack-bundle-analyzer：可视化剖析。通过矩阵树图的形式将包内各个模块的大小和依赖关系出现进去。webpack-chartwebpack-analyse
七 参考文献
返回目录
2019 年文章 ：
- [x] Webpack 优化——将你的构建效率提速翻倍【浏览倡议：10min】
- [x] 性能优化篇 —Webpack 构建速度优化【浏览倡议：10min】
- [x] 应用 webpack4 晋升 180% 编译速度【浏览倡议：10min】
- [x] 多过程并行压缩代码【浏览倡议：5min】
- [x] webpack 4: Code Splitting 和 chunks 切分优化【浏览倡议：5min】
2018 年文章 ：
- [x] Tree-Shaking 性能优化实际 – 原理篇【浏览倡议：10min】
- [x] 体积缩小 80%！开释 webpack tree-shaking 的真正后劲【浏览倡议：10min】
- [x] 你的 Tree-Shaking 并没什么卵用【浏览倡议：5min】
- [x] webpack 如何通过作用域剖析打消无用代码【浏览倡议：5min】
- [x] 让你的 Webpack 腾飞—考拉会员后盾 Webpack 优化实战【浏览倡议：5min】
- [x] webpack dllPlugin 打包体积和速度优化【浏览倡议：5min】
- [x] webpack 优化之 code splitting【浏览倡议：5min】
2017 年文章 ：
- [x] Webpack 打包优化之速度篇【浏览倡议：5min】
- [x] 减速 Webpack- 放大文件搜寻范畴【浏览倡议：5min】
- [x] Webpack 大法之 Code Splitting【浏览倡议：5min】
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。
