在前端开发中，我们经常会遇到代码量过大影响页面加载速度的问题。而使用 Webpack 的优化插件可以有效地解决这一问题，其中一个非常重要的插件是 CommonsChunkPlugin。
CommonsChunkPlugin 是什么？
CommonsChunkPlugin 是 Webpack 提供的一个优化插件，可用于提取出多个入口文件中的公共代码，将其打包到一个单独的文件中。这样可以大幅减少每个页面需要下载的代码量，提高网页的加载速度。
使用 CommonsChunkPlugin 的步骤
使用 CommonsChunkPlugin 的步骤非常简单：
在 webpack.config.js 中配置入口文件，例如：
entry: { home: './src/home.js', about: './src/about.js', contact: './src/contact.js' }添加 CommonsChunkPlugin 插件，并指定公共代码的打包规则，例如：
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', minChunks: 2, chunks: ['home', 'about', 'contact'] }) ]在这个例子中，我们将 home.js、about.js 和 contact.js 中的公共代码打包到一个名为 common.js 的文件中。其中，minChunks 表示这些公共代码至少被两个入口文件使用，chunks 表示需要提取公共代码的入口文件。
示例代码
为了更好地理解如何使用 CommonsChunkPlugin，下面给出一个完整的示例代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- ------------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -------------------------------------
----- ---------
---------- --
------- -------- -------- ----------
--
-
---- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
-------------- ------------
------- -------------------------------------
------- -----------------------------------
------- ------------------------------------
------- --------------------------------------
-------
------
----------- ---------
-----
-- -----------------
-- ------------------
-- --------------------
------
---- ----------------
-------
--------- -------------------- ---- ------- -- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - --- - ---- ------------------- ---------------- ---- ------------ --- ------------------------------- --
-- -------------------- ---- ------- -- -------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - --- - ---- ------------------- ---------------- ---- ------------- --- ------------------------------- --
-- -------------------- ---- ------- -- ---------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - --- - ---- ------------------- ---------------- ---- --------------- --- ------------------------------- --
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ ----- --- - -- ----- -- -- -
-----
----------------
---------- -- ------- ---------
------
--通过这个示例代码，我们可以看到公共代码被提取到了 common.bundle.js 文件中，能有效地减少每个页面需要下载的代码量。
总结
通过使用 CommonsChunkPlugin，我们可以有效地优化打包后的文件尺寸，提高网页的加载速度。但是需要注意的是，这个插件只适用于多个入口文件存在公共代码的情况，如果没有公共代码，使用这个插件反而会增加打包后的文件尺寸。因此，在实际开发中需要根据具体情况进行综合考虑，灵活使用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6467d90d968c7c53b0822963