前言
Webpack 是现代前端开发中非常流行的模块打包工具，它可以将各种类型的静态资源（JavaScript、CSS、图片等）打包成一个或多个 bundle，方便前端工程师使用和部署。
在打包 React 项目时，我们不仅要考虑模块依赖关系的处理，还要注意打包后的代码体积。这篇文章将介绍如何使用 Webpack 中的 occurrenceOrderPlugin 插件，优化打包后的代码体积。
occurrenceOrderPlugin 简介
occurrenceOrderPlugin 是 Webpack 自带的一个插件，它会根据模块使用次数给打包后的代码排序，将使用次数较多的模块放到打包文件的前面，使用次数较少的模块放到后面，这样可以提高代码的压缩率，减小打包后的文件体积。
occurrenceOrderPlugin 插件默认开启，无需额外配置。在 Webpack 4 以上版本中，可以通过 optimization.usedExports 和 optimization.sideEffects 配置项进一步优化代码体积。
使用示例
下面我们通过一个简单的 React 项目来演示如何使用 occurrenceOrderPlugin 插件优化代码体积。
首先，我们要安装 React 和相关依赖：
npm install react react-dom babel-loader @babel/preset-react webpack webpack-cli webpack-dev-server -D
然后，在项目根目录下创建 webpack.config.js 文件，配置 Webpack：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -----------------------
-
-
-
-
--
---------- -
------------ -------------------- ----------
----- ----
-
--在我们的项目中，只有一个 src/index.js 文件，它用于渲染一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- - -- -- -
----- ------- --------- - ------------------
------ -
-----
---------- ------------
------- ----------- -- -------------- - ---------------
------
--
--
-------------------- --- ---------------------------------最后，在 package.json 文件中添加启动脚本：
{
"scripts": {
"start": "webpack serve --open"
}
}现在我们运行 npm start 命令启动开发服务器，可以在浏览器中预览项目界面。
接下来，我们要测试一下 occurrenceOrderPlugin 插件是否生效。为了方便测试，我们在 index.js 文件中手动添加一个未使用的 import 语句：
import unusedModule from './unusedModule';
unusedModule.js 文件内容如下：
const unusedModule = 'I am unused'; export default unusedModule;
然后，在 webpack.config.js 文件中添加 optimization.usedExports 和 optimization.sideEffects 配置项：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -----------------------
-
-
-
-
--
------------- -
------------ -----
------------ ----
--
---------- -
------------ -------------------- ----------
----- ----
-
--保存配置文件后，重新启动开发服务器，我们发现 unusedModule 模块已经不再出现在打包后的代码中了。这是因为 occurrenceOrderPlugin 插件将使用次数较少的模块放到了代码的末尾，只有真正被使用的模块才被打包输出，这样可以有效减小代码体积。
总结
通过使用 occurrenceOrderPlugin 插件，我们可以优化 React 项目的打包后代码体积，减小文件体积，提高下载速度，对于项目的性能和用户体验都有显著的提升。同时，在 Webpack 4 以上版本中，还可以通过 optimization.usedExports 和 optimization.sideEffects 配置项进一步优化代码体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d4adb95b1f8cacd4d8365