在使用 Webpack 打包项目时，我们通常会将第三方库和框架的代码打包到单独的 vendor.js 文件中，以便于浏览器缓存和加速页面加载速度。但是，有时候 vendor.js 文件会变得非常巨大，甚至超过了几十 MB，这将导致页面加载速度变慢，用户体验下降。这篇文章将介绍如何解决这个问题。
原因分析
vendor.js 文件变得巨大的原因通常是因为我们将过多的第三方库和框架打包到了其中，而其中有很多并不是我们项目所必需的。此外，由于 Webpack 打包机制的原因，有些第三方库被打包到了 vendor.js 文件中，但其实并没有被我们的项目所使用。这些都会导致 vendor.js 文件变得巨大。
解决方案
解决 vendor.js 文件变得巨大的问题，最简单的方法就是通过分离第三方库和框架，只打包必需的内容。下面介绍两种方法：手动配置和使用第三方插件。
手动配置
在 webpack 配置文件中，我们可以手动指定哪些第三方库需要打包到 vendor.js 文件中，哪些不需要。对于不需要打包的第三方库，可以通过 CDN 或在 HTML 文件中引入的方式加载。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
-------- ------------- -- -----------
-------- ------------
--
------- -
--------- -----------------------
--
-------- -
--- -------------------------------------
----- ----------
---------- --------
---
--- -------------------------------------
----- ----------
---------- --------
--
-
-使用第三方插件
除了手动配置，我们还可以使用第三方插件来解决 vendor.js 文件变得巨大的问题。以下是几个常用的插件：
PurifyCSS-webpack
由于我们通常将第三方库和框架的 CSS 文件也打包到 vendor.js 文件中，因此使用 PurifyCSS-webpack 插件可以帮助我们自动剔除无用的 CSS 代码。
-- -------------------- ---- -------
-- -----------------
----- --------------- - -----------------------------
----- ---- - ----------------
-------------- - -
------ -
-------- -------------
-------- ------------
--
------- -
--------- -----------------------
--
-------- -
--- -------------------------------------
----- ----------
---------- --------
---
--- -------------------------------------
----- ----------
---------- --------
---
--- -----------------
-- ----- ---- ----
------ ------------------------------ ----------
--
-
-IgnorePlugin
如果我们的项目中有些第三方库只在开发环境下使用，可以使用 IgnorePlugin 插件在生产环境下忽略它们。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
-------- -------------
-------- ------------
--
------- -
--------- -----------------------
--
-------- -
--- -------------------------------------
----- ----------
---------- --------
---
--- -------------------------------------
----- ----------
---------- --------
---
--- ------------------------------------ ----------
-
-DLLPlugin
DLLPlugin 插件可以将第三方库和框架的代码打包到单独的文件中，并将其缓存起来。这样，在每次打包项目时，就不会重复打包这些代码，从而提高打包速度。
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
----- ---- - ----------------
----- ------ - -
-----------
----------
-
-------------- - -
------ -
------- ------
--
------- -
--------- ----------------
----- -------------------- -------
-------- ---------------
--
-------- -
--- -------------------
----- ----------------
----- -------------------- ------ -----------------------
--
-
-结论
在使用 Webpack 打包项目时，避免出现巨大的 vendor.js 文件可以提高页面加载速度和用户体验。通过手动配置或使用第三方插件，我们可以只打包必需的第三方库和框架，或通过缓存第三方库和框架的代码来解决此问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670106a20bef792019b07d99