打包体积是任何一个前端项目开发中都需要考虑的一个问题。特别是在 React 项目中，React 库本身就有一定的大小，加上项目所需的其他依赖库，如果打包后的体积过大，就会牵涉到页面加载速度的问题，给用户造成不好的体验。那么如何解决这个问题呢？本文将详细介绍多种解决方案。
1. Code Splitting
Code Splitting 是 React 官方推荐的解决打包体积过大的方法。通过将代码按需加载，可以减少项目的整体体积。
在 React 中，可以使用 React.lazy 和 import() 来实现 Code Splitting。例如：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-以上代码中，LazyComponent 是需要按需加载的组件，使用 React.lazy 将其定义为懒加载组件，然后在组件内使用 Suspense 组件包裹。fallback 属性可以指定在加载过程中展示的占位符。
2. Tree Shaking
Tree Shaking 可以通过在打包时去除未使用的模块，减少项目整体体积。在使用 React 项目时，可以结合使用 Babel 编译工具和 Webpack 打包工具来实现 Tree Shaking。
在使用 Babel 时，需要开启 useBuiltIns 和 modules 选项，例如：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- --
---------- -----
-
--
---------------------
-
-以上代码中，useBuiltIns 选项用于使用符合需求的 polyfill 代替全部 polyfill，减少额外的代码，modules 选项用于配置 ES6 模块语法转换成其他模块语法。
在使用 Webpack 时，可以结合使用 UglifyJSPlugin 和 CommonsChunkPlugin 来实现 Tree Shaking。
-- -------------------- ---- -------
----- -------------- - -----------------------------------
----- ------- - -------------------
-------------- - -
------------- -
---------- -
--- ----------------
-------------- -
------- -
--------- ------
--
--------- -
------- -----
--------- ------
------------- -----
--
--
---
--
------------ -
------------ -
-------- -
----- ----------
------- ----------
---------- --
--
--
--
--
-------- -
--- --------------------------------
--
--以上代码中，UglifyJSPlugin 和 webpack.HashedModuleIdsPlugin() 用于打包时去除未使用的代码。splitChunks 属性用于将公共模块打包到 commons.js 文件中。
3. 按需引入第三方库
在 React 项目中，通常需要使用第三方库，例如 Ant Design，React Router 等等。但是在项目中并不是所有的页面都需要使用到这些库，可以通过按需引入的方式，减少项目打包时的体积。
在使用 Ant Design 时，可以使用 babel-plugin-import 插件来实现按需引入，例如：
-- -------------------- ---- -------
-
---------- -
-
---------
-
-------------- -------
-------- ----
-
-
-
-以上代码中，style 选项用于指定是否需要引入样式。
在使用 React Router 时，可以使用 react-router-loadable 插件来实现按需引入，例如：
-- -------------------- ---- ------- ------ -------- ---- ----------------- ----- ---- - ---------- ------- -- -- ----------------- -------- -- -- ---------------------- --- ----- ----- - ---------- ------- -- -- ------------------ -------- -- -- ---------------------- ---
以上代码中，Loadable 组件用于将组件按需加载。
小结
通过 Code Splitting、Tree Shaking 和按需引入第三方库等方法，可以有效地解决 React 项目打包体积过大的问题。我们需要在实际开发过程中结合具体情况选择合适的方法，不断优化项目，提高用户体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d04ddfe46428fe9ed32f50