在前端项目开发中，webpack 已经成为了必不可少的构建工具之一。他能够帮我们把多个模块、插件、loader 整合到一起，方便我们进行文件打包和代码优化。在本文中，我们将探讨如何在 webpack 3.0 中进行生产环境构建的优化方案，包括 babel tree shaking 和 splitChunks 插件的使用。
Babel 的 Tree Shaking
Tree shaking 是一个常见的概念，指的是删除未被使用的代码。使用 tree shaking，可以减少我们打包后的代码体积，提高网站的性能。在 webpack 中，可以使用 babel 来实现 tree shaking。我们来看一下下面的示例代码：
------ ----- ---- -------- ------ ----- ---- -------- ------
在这个示例中，我们只会调用 foo 函数，而并没有调用 bar 函数。这时，我们可以使用 babel 的 tree shaking 功能，实现删除未被使用的代码。在 webpack 中，我们可以通过下面的步骤实现：
第一步，安装 babel-loader 和 babel-preset-env：
--- ------- ------------ ---------------- ----------
第二步，配置 webpack：
-------------- - -
------ -----------------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-
-在这个配置中，我们使用了 babel-loader 来进行代码的处理。同时，在 options 中，我们指定了 preset 为 env，这意味着我们使用了 babel 的生成器，并且会根据 browserslist 的配置来进行转换和 tree shaking。
SplitChunks 插件
除了 babel 的 tree shaking 功能，我们还可以通过使用 SplitChunks 插件来实现代码的优化。SplitChunks 是一个独立的插件，需要单独安装：
--- ------- ------- ----------
在安装完成后，我们需要配置两个选项：chunks 和 minChunks。Chunks 指定需要处理的模块。如果我们指定了 all，则会将所有模块进行处理。如果 minChunks 指定了值为 2，则会将所有至少被两个模块引用的模块进行处理。
-------------- - -
-- ---
------------- -
------------ -
------- ------
---------- -
-
-
-在这个示例中，我们设置了 chunks 为 all，并指定了 minChunks 为 2。这意味着，我们将所有至少被两个模块引用的模块进行处理，实现代码的优化。
总结
在本文中，我们探讨了如何在 webpack 3.0 中进行生产环境构建的优化方案，包括 babel 的 tree shaking 和 SplitChunks 插件的使用。通过学习这两种方案，我们可以更好地优化前端项目代码，提高网站的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647159d6968c7c53b0f3bcfc