在前端开发中，我们经常会使用 webpack 来打包我们的代码。当我们的项目变得越来越大，打包也就变得越来越慢，这时候我们就需要优化我们的 webpack 打包配置，提高打包速度。其中一个重要的优化方式就是提取公共代码。
什么是公共代码
公共代码，顾名思义，指的是在多个页面中共用的代码，包括但不限于第三方库，公共组件等。
举个例子，我们有两个页面 A 和 B，它们都使用了 Vue.js 框架。由于我们没做任何优化，每个页面都会把所有 Vue.js 相关的代码都打包进去，导致打包文件大小过大，加载速度过慢。我们可以通过提取 Vue.js 相关的代码成为公共代码，让 A 和 B 共用这些代码，从而减小打包文件大小，提高加载速度。
如何提取公共代码
Webpack 提供了多种方法来提取公共代码：
1. 使用 splitChunksPlugin 插件
Webpack v4+，推荐使用 splitChunksPlugin 插件。该插件使用新的方法来分离代码，我们可以通过在 webpack 配置中设置 optimization.splitChunks.chunk 对象来控制它的行为。
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- ---
------------------- ---
----------------------- ----
----- -----
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--以上是一个示例的配置，我们可以修改 optimization.splitChunks 中的各个参数来达到不同的分离效果。
使用该插件可以减少很多手动配置，能够更好地帮助我们提取公共代码。
2. 使用 CommonsChunkPlugin 插件
Webpack v3-，可以使用 CommonsChunkPlugin 插件。
-- -----------------
----- ------- - -------------------
-------------- - -
------ -
---- ---------------
-------- ------------------
--
------- -
--------- -----------
--
-------- -
--- -------------------------------------
----- ----------
--------- ------------
--
-
--以上是一个示例的配置，我们可以通过把公共代码拆分到单独的模块中（例如 vendors.js），来避免重复打包这些代码。我们可以在多页面的 webpack 配置中，使用 CommonsChunkPlugin 插件来提取公共代码。
3. 使用 require.ensure
Webpack v1+，可以使用 require.ensure 来异步加载模块。如果我们希望在特定的时候，才加载公共代码，可以使用这种方式。
-- ------- ------------------------------- ----------------- - --- ------ - ----------------------- -- --- --- -- -------- ------------------------------- ----------------- - --- ------ - ----------------------- -- --- --- -- -------- ------------------------------- ----------------- - --- ------ - ----------------------- -- --- ---
以上是一个示例代码片段，我们可以将公共代码放在 common.js 中，通过 require.ensure 来异步加载它。整个应用程序只有在需要时才会去加载这部分代码。
总结
提取公共代码在前端项目中是一个常用的优化方式，我们可以通过 SplitChunksPlugin 或者 CommonsChunkPlugin 插件，以及 require.ensure 来实现。
通过使用这些方法，我们可以减小打包后的文件大小，提高网页的加载速度。同时，也让我们的项目更加可维护和可扩展。
写代码不仅仅是为了功能的实现，还包括了对性能优化等更加深入的思考。希望大家在前端开发中，不断探索和学习，写出更加优秀的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646ebb24968c7c53b0d0ef16