关于前端:jsliang-求职系列-35-Webpack-性能优化

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三针对 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 个角度登程，收集一些相干优化材料。

resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块，默认是 ['node_modules']。

然而，它会先去当前目录的 ./node_modules 查找，没有的话再去 ../node_modules，最初到根目录 —— 即 npm 查找包的规定。

所以能够间接指定我的项目根目录，这样代码就不须要一层一层查找。

resolve: {modules: [path.resolve(__dirname, 'node_modules')],
}

在导入没带文件后缀的门路时，Webpack 会主动带上后缀去尝试询问文件是否存在，而 resolve.extensions 用于配置尝试后缀列表；默认为 extensions:['js', 'json']。

当遇到 require('./data') 时 Webpack 会先尝试寻找 data.js，没有再去找 data.json；如果列表越长，或者正确的后缀越往后，尝试的次数就会越多。

所以在配置时为晋升构建优化需恪守：

频率呈现高的文件后缀优先放在后面。
列表尽可能的少，例如只有 3 个：js、jsx、json。
书写导入语句时，尽量写上后缀名。

以 babel-loader 为例，能够通过 include 和 exclude 帮忙咱们防止 node_modules 这类宏大文件夹。

即通过 include 通知 Webpack 哪些咱们是须要检测的，通过 exclude 通知 Webpack 哪些咱们是不须要检测的（例如曾经拾掇过的动态资源）

cache-loader

在 babel-loader 开启 cache 后，将 loader 的编译后果写进硬盘缓存，再次构建如果文件没有发生变化则会间接拉取缓存。

uglifyjs-webpack-plugin

通过这个插件也能够解决缓存问题。

因为有大量文件须要解析和解决，构建是文件读写和计算密集型的操作，特地是当文件数量变多后，Webpack 构建慢的问题会显得重大。

文件读写和计算操作是无奈防止的，那能不能让 Webpack 同一时刻解决多个工作，施展多核 CPU 电脑的威力，以晋升构建速度呢？

Happypack 能够将工作分解成多个子过程去并发执行，大大晋升打包效率。

除此之外 thread-loader 和 Happypack 一样，然而配置比较简单。

因为自带的 UglifyjsWebpackPlugin 压缩插件是单线程运行的，而 TerserWebpackPlugin 能够并发运行压缩性能（多过程）。

所以通过 TerserWebpackPlugin 代替自带的 UglifyjsWebpackPlugin 插件。

通过 DllPlugin 或者 Externals 进行动态依赖包的拆散。

因为 CommonsChunkPlugin 每次构建会从新构建一次 vendor，所以出于效率思考，应用 DllPlugin 将第三方库独自打包到一个文件中，只有依赖本身产生版本变动时才会从新打包。

在 Webpack 中，到底什么是代码拆散？代码拆散容许你把代码拆分到多个文件中。如果应用切当，你的利用性能会进步很多。因为浏览器能缓存你的代码。

每当你做出一次批改，蕴含批改的文件须要被所有拜访你网站的人从新下载。但你并不会常常批改利用的依赖库。

如果你能把那些依赖库拆分到齐全拆散的文件中，即便业务逻辑产生了更改，访问者也不须要再次下载依赖库，间接应用之前的缓存就能够了。

因为有了 SplitChunksPlugin，你能够把利用中的特定局部移至不同文件。如果一个模块在不止一个 chunk 中被应用，那么利用代码拆散，该模块就能够在它们之间很好地被共享。

JS 压缩：UglifyjsWebpackPlugin
HTML 压缩：HtmlWebpackPlugin
CSS 压缩：MiniCssExtractPlugin
图片压缩：image-webpack-loader
Gzip 压缩：不包含图片

通过 ES6 的 import/export 来查看未援用代码，以及 sideEffects 来标记无副作用代码，最初用 UglifyJSPlugin 来做 Tree Shaking，从而删除冗余代码。

Scope Hoisting 是 Webpack3 的新性能，直译为 「作用域晋升」，它能够让 Webpack 打包进去的 「代码文件更小」，「运行速度更快」。

相熟 JavaScript 都应该晓得 「函数晋升」 和 「变量晋升」，JavaScript 会把函数和变量申明晋升到以后作用域的顶部。

「作用域晋升」 也相似于此，Webpack 会把引入的 js 文件“晋升到”它的引入者顶部。

Scope Hoisting 的实现原理其实很简略：剖析出模块之间的依赖关系，尽可能将打散的模块合并到一个函数中，前提是不能造成代码冗余。因而「只有那些被援用了一次的模块能力被合并」。

因为 Scope Hoisting 须要剖析出模块之间的依赖关系，因而源码「必须采纳 ES6 模块化语句」，不然它将无奈失效。起因和 Tree Shaking 中介绍的相似。

什么是 代码宰割 （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-chart
webpack-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】

一 目录

二 前言

三 针对 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 自身构建优化

四通过 Loader 和 Plugin 优化

五其余优化点

六优化体验

七参考文献