前言
作为前端开发者，我们都知道 Webpack 是一个非常重要的工具，它可以帮助我们构建和打包项目，提高开发效率。在 Webpack4 中，有一些新特性，可以帮助我们更好地优化打包体积，使得我们的项目更加高效、稳定。本文将详细介绍 Webpack4 的新特性和如何使用它们来优化打包体积。
Tree Shaking
在 Webpack3 中，我们可以使用 UglifyJSPlugin 来进行代码压缩和消除无用代码，但这种方式并不完全有效。在 Webpack4 中，Tree Shaking 成为了官方推荐的消除无用代码的方式。
Tree Shaking 的核心原理是通过静态分析代码，找出未被引用的代码，然后将其从打包文件中删除。这种方式可以减小打包文件的体积，提高网页加载速度。
在使用 Tree Shaking 时，需要注意以下几点：
- 代码必须是 ES6 模块化的，使用 import 和 export 关键字。
- 需要使用 Babel 将代码转换成 ES5 语法。
- 需要在 Webpack 配置文件中开启 optimization.usedExports 和 optimization.sideEffects。
下面是一个示例：
-- -------- ------ - --- - ---- ------------ ------------------ ---- -- ------- ------ -------- ------ -- - ------ - - -- - ------ -------- ------ -- - ------ - - -- -
在这个示例中，我们只使用了 add 函数，而 sub 函数没有被使用。使用 Tree Shaking 后，sub 函数将被从打包文件中删除。
Scope Hoisting
在 Webpack3 中，每个模块都会被打包成一个函数，这样会增加打包文件的体积和加载时间。在 Webpack4 中，Scope Hoisting 可以将模块之间的依赖关系进行分析和优化，将打包文件中的函数调用关系变为一个简单的函数声明，从而减小打包文件的体积和提高加载速度。
Scope Hoisting 的使用非常简单，在 Webpack 配置文件中开启 optimization.concatenateModules 和 optimization.provideExports 即可。
SplitChunksPlugin
在 Webpack3 中，我们可以使用 CommonsChunkPlugin 来将公共代码提取出来。在 Webpack4 中，SplitChunksPlugin 代替了 CommonsChunkPlugin，可以将公共代码和第三方库代码分别提取出来，从而减小打包文件的体积。
SplitChunksPlugin 有以下几个配置项：
- chunks：表示哪些模块会被提取，默认为 async，即只提取异步加载的模块。
- minSize：表示被提取的模块的最小体积，默认为 30000。
- maxSize：表示被提取的模块的最大体积，默认为 0，表示没有限制。
- minChunks：表示被提取的模块至少被引用的次数，默认为 1。
- maxAsyncRequests：表示异步加载时最多有几个模块同时加载，默认为 5。
- maxInitialRequests：表示入口模块最多有几个模块同时加载，默认为 3。
- automaticNameDelimiter：表示自动生成的文件名的分隔符，默认为 ~。
- name：表示手动指定提取出来的公共代码的文件名。
下面是一个示例：
-- -----------------
-------------- - -
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--在这个示例中，我们使用了 SplitChunksPlugin 将第三方库代码和公共代码分别提取出来，从而减小了打包文件的体积。
总结
通过使用 Tree Shaking、Scope Hoisting 和 SplitChunksPlugin 这些新特性，我们可以大幅度减小打包文件的体积，提高网页加载速度，从而使得我们的项目更加高效、稳定。在使用这些新特性时，需要注意相关的配置项和使用方式，才能达到最佳的优化效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655f19d0d2f5e1655d943efa