Webpack 是一个现代化的前端项目打包工具，它可以将多个模块打包成一个或多个文件，以便于在浏览器端加载。在实际开发过程中，我们经常需要优化 Webpack 的打包效率，以提升页面加载速度和用户体验。本文将介绍如何使用 externals 和 splitChunks 插件来优化 Webpack 的性能。
externals
在 Webpack 中，externals 可以用来排除某些模块的打包，从而减小打包文件的体积。这些模块可以通过 CDN 或者其他的方式加载，以便于提升页面加载速度。例如，我们可以将 jQuery 从打包文件中排除，然后通过 CDN 加载：
// webpack.config.js
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- --------- ----------- ------- ---------------------------------------------------------------------------- ------- ------ ------- ---------------------- ------- -------
在上面的例子中，我们将 jQuery 从打包文件中排除，然后在 index.html 中通过 CDN 加载。这样可以减小打包文件的体积，并且提升页面加载速度。
splitChunks
除了使用 externals，我们还可以使用 splitChunks 插件来优化打包文件。splitChunks 可以将多个模块共同依赖的代码提取成一个单独的文件，以便于缓存和复用。例如，我们可以将所有第三方库的代码提取成一个单独的文件：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------------ -
-------- -
----- -------------------------
----- ----------
------- -----
-
-
-
-
--在上面的例子中，我们使用 splitChunks 插件将所有 node_modules 中的模块提取成一个名为 vendors 的文件。这样可以减小 app.js 的体积，并且提升页面加载速度。
除了 vendors，我们还可以根据实际情况设置其他的 cacheGroups，例如将所有 CSS 提取成一个单独的文件：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------------ -
------- -
----- ---------
----- ---------
------- ------
-------- ----
-
-
-
-
--在上面的例子中，我们使用 splitChunks 插件将所有 .css 文件提取成一个名为 styles 的文件。这样可以减小 app.js 的体积，并且提升页面加载速度。
总结
本文介绍了如何使用 externals 和 splitChunks 插件来优化 Webpack 的性能。使用 externals 可以排除某些模块的打包，从而减小打包文件的体积；使用 splitChunks 可以将多个模块共同依赖的代码提取成一个单独的文件，以便于缓存和复用。在实际开发过程中，我们需要根据实际情况设置 externals 和 splitChunks，以提升页面加载速度和用户体验。
示例代码：https://github.com/xxx/xxx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c8a1f2add4f0e0ff269bae