当我们在进行 Web 前端项目开发时，经常会使用第三方库，如 jQuery、React 等。这些库的文件大小较大，如果每次都引入全部代码则会增加网页加载时间，影响用户体验。因此，我们需要使用 Webpack 实现较小的 vendor.js 文件来优化加载速度。
Webpack 是什么？
Webpack 是一个模块化打包工具，可以将多个模块打包成单独的文件，方便前端开发者对代码进行管理和维护。Webpack 可以将 JavaScript、CSS、图片等文件按需加载，实现按需打包，减小文件大小。
Webpack 如何实现较小的 vendor.js 文件？
要实现较小的 vendor.js 文件，我们需要将所有的第三方库合并成一个文件进行打包，同时还需要压缩文件大小。Webapck 提供了几个插件可以帮助我们实现这个目标。
1. 使用CommonsChunkPlugin
使用 CommonsChunkPlugin 应该是实现较小的 vendor.js 文件最简单的方法。它将所有的第三方库打包到一个文件中，因此可以显著减少加载时间。你可以将以下代码添加到 webpack.config.js 文件中：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- -------------------------------------
----- -------- -- -------------
--
-
-在添加了以上代码后，Webpack 会自动将所有的第三方库打包到一个 vendor.js 文件中。
2. 使用UglifyJsPlugin
使用 UglifyJsPlugin 可以优化代码，并将文件压缩到最小大小。你可以通过以下代码添加 UglifyJsPlugin：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ---------------------------------
--------- -
--------- -----
--
------- -
--------- -----
-
--
-
-引入 UglifyJsPlugin 后，Webpack 会自动开启代码压缩功能，同时会删除所有的注释和警告信息，以减小文件大小。
3. 使用DllPlugin和DllReferencePlugin
使用 DllPlugin 和 DllReferencePlugin 可以将第三方库预编译，以减小打包时间和文件大小。
首先，创建一个名为 vendor-manifest.json 的 manifest 文件，包含了所有第三方库的名称和对应的位置。你可以通过以下代码创建该文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- ---------- -------- ------------
--
------- -
----- -------------------- --------
--------- ------------
-------- ---------------
--
-------- -
--- -------------------
----- ----------------
----- -------------------- -----------------------
--
-
--接着，在 webpack.config.js 文件中添加 DllReferencePlugin，这个插件会将 DllPlugin 生产的 manifest 文件引入到打包流程中。以下是引入的代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
-------- ----------
--------- ---------------------------------
---
--- -------------------------------------
----- ---------
--------- -----------
--
-
-以上代码会将 vendor.js 文件中的所有第三方库单独打包，减小文件大小。
示例代码
下面是一个示例代码，展示如何使用 Webpack 打包 vendor.js 文件。
webpack.config.js
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
------- ---------- --------
--
------- -
----- ----------------------- --------
--------- ------------
-------- ----------------
--
-------- -
--- -------------------
----- ----------------
----- -------------------- -----------------------
---
--- ----------------------------
-------- ----------
--------- ---------------------------------
---
--- -------------------------------------
----- ---------
--------- -----------
---
--- ---------------------------------
--------- -
--------- -----
--
------- -
--------- -----
-
--
-
--在以上示例代码中，我们将 jQuery 和 React 打包到 vendor.js 中，并使用 UglifyJsPlugin 进行压缩。
总结
通过使用 Webpack，我们可以轻松地实现较小的 vendor.js 文件，以提高我们的项目性能。需要注意的是，不同的项目有不同的优化策略，我们需要根据具体情况来选择合适的优化方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494241448841e98941a8ff6