React 是一款非常流行的前端框架，但是随着项目的复杂度增加，打包速度逐渐变慢也成为了一个令人头疼的问题。Webpack 是目前最流行的前端打包工具，可以通过一些优化技巧来提高 React 应用的打包速度。
1. 使用 Tree Shaking
Tree Shaking 是指通过静态分析代码的方式，去除没有使用的代码，从而减少打包后的文件大小。在 React 应用中，我们可以通过使用 ES6 模块的方式来实现 Tree Shaking。在代码中，我们只需要导入我们需要使用的组件或工具函数，而不是整个库，这样就能够有效地减少打包后的文件大小。
import { Button } from 'antd';
import { useState } from 'react';2. 使用 Code Splitting
Code Splitting 是指将代码拆分成多个小块，然后按需加载。这样可以减少首次加载时的文件大小，加快页面加载速度。在 React 应用中，我们可以使用 React.lazy 和 Suspense 来实现 Code Splitting。
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-3. 配置 babel-loader
在 React 应用中，我们通常会使用 Babel 来将 ES6 代码转换成 ES5 代码，以兼容更多的浏览器。但是默认情况下，babel-loader 会将所有的代码都转换成 ES5 代码，这样会导致打包后的文件体积变大。因此，我们需要配置 babel-loader，只将我们需要转换的代码转换成 ES5 代码。
-- -------------------- ---- -------
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
---------- - ------------ ------- ------ ----- ---
----------------------------------
-------------------------------------
-
-
-
-4. 使用 HappyPack
Webpack 在打包时是单线程执行的，这意味着在打包大型项目时，会占用很长时间。HappyPack 是一个能够让 Webpack 多线程执行的插件，可以大大提高打包速度。在 React 应用中，我们可以使用 HappyPack 来优化打包速度。
-- -------------------- ---- -------
----- --------- - ---------------------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- ------------------------
-
-
--
-------- -
--- -----------
--- -----
-------- -----------------
-------- -
--
-
--5. 使用 DllPlugin
DllPlugin 是一个能够将第三方库打包成单独的文件的插件，可以大大减少打包时间，提高开发效率。在 React 应用中，我们可以使用 DllPlugin 来优化打包速度。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------ -------
--
------- -
--------- ----------------
----- ----------------------- -------
-------- --------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ---------------------------
--
-
--总结
通过使用以上优化技巧，我们可以大大提高 React 应用的打包速度，加快页面加载速度，提高用户体验。在实际开发中，我们可以根据项目的实际情况，选择合适的优化方案，以达到最佳的优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658f8695eb4cecbf2d527f57