随着前端项目的不断增加，我们使用的 JavaScript 库和框架也越来越多，其中很多库和框架都有着庞大的体积，这就导致了我们在使用 Webpack 打包时，node_modules 下的包体积过大，导致打包后的文件过大，加载过慢，影响用户体验。本文将介绍一些方法来解决这个问题。
方法一：使用 externals 配置项
Webpack 有一个 externals 配置项，可以将一些不需要打包的库排除在外。我们可以用这个配置项来减小打包后的文件体积。具体操作如下：
-- -----------------
-------------- - -
-- --- ----
---------- -
-- - ------ -------
------- -
--------- ---------
---- ---------
----- ---
-
-
-我们可以将不需要打包的库名和对应的库在不同模块系统中的名称配置在 externals 对象中，Webpack 打包时就会直接使用全局变量。
方法二：使用 IgnorePlugin 插件
除了使用 externals 配置项外，我们还可以使用 IgnorePlugin 插件来忽略一些不需要打包的代码。具体操作如下：
-- -----------------
----- ------- - -------------------
-------------- - -
-- --- ----
-------- -
-- -- ------ -- ------- --
--- ------------------------------------ ----------
-
-上面的配置将忽略 moment 库下的 /locale 目录，这样就可以减少打包后的文件的体积。
方法三：使用 tree shaking
Webpack 2 及以上版本支持 tree shaking，可以去除无用代码来减小文件体积。我们可以使用 ES6 中的 import 和 export 关键字来实现 tree shaking。
-- ---------- ------ ----- - - --- ------ ----- - - --- -- ---------- ------ ----- - - --- ------ ----- - - ---
如果我们只需要使用 module1.js 中的 a 和 b 变量，我们可以这样引入：
-- -------- ------ - -- - - ---- --------------- -------------- ---
打包后的文件只包含 module1.js 中的 a 和 b 变量，不会包含 module2.js 中的 c 和 d 变量。这样可以有效地减少打包后的文件体积。
方法四：使用 DllPlugin 插件
DllPlugin 插件可以将一些稳定的库（如 React、Vue 等）提前打包好成一个文件（下面将其称为 manifest 文件），减少了打包时对这些库的重复打包，能够大幅度提升打包速度。
具体操作如下：
首先我们需要先新建一个 webpack.dll.config.js 配置文件，用来打包需要提前打包的稳定库：
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
-- ---- ----- -
------ ---------
--
------- -
-- ---- -------- ----------
--------- -----------------------
----- ----------------------- -------
-- -- ----------------- - ---- ------- ---- ------
-------- ---------------
--
-------- -
-- - ----- ------ -------- ---------
--- -------------------
----- ----------------
----- ----------------------- ------ -----------------------
--
-
--在 package.json 中添加以下命令：
---------- - ------------ -------- -------- ---------------------- -
执行 npm run build:dll，将会打包出 manifest 文件。
接下来我们需要修改 webpack.config.js 文件，添加以下配置：
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
-- - -------- --------- ---- ---
--- ----------------------------
--------- ------------------------------------
--
-
--在 index.html 文件中同时引入 manifest 文件和打包后的 js 文件：
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ---------------
---- -- -------- -- ---
------- ----------------------------------
---- ------ -- -- ---
------- ---------------------------------
-------
-------这里我们引入了 React 库提前打包好的 manifest 文件 react.manifest.json 和打包后的 js 文件 app_177ba398.js。
这样，每次打包时，Webpack 就不需要重新打包 React 库了，只要将打包后的代码和修改后的 manifest 文件一起发布到生产环境中即可。
总结
通过以上四种方式可以有效地减小 Webpack 打包后的文件体积，提高网站的访问速度，优化用户体验。我们可以根据项目需求和实际情况选择适合的方式来优化打包体积。
如果你想了解更多关于 Webpack 的配置和使用，可以去阅读 Webpack 的官方文档：https://webpack.js.org/concepts/。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649097f548841e9894eb9a68