在前端开发中，使用 webpack 打包 React SPA 应用是非常常见的。但是随着项目的越来越复杂，打包出来的代码也越来越庞大，导致首屏加载时间过长，给用户带来不好的体验。本文将从三个方面介绍如何优化首屏加载时间。
1. 代码分割
Webpack 提供了一种叫做代码分割（Code Splitting）的机制，它可以将应用分割成一些小块，只加载用户需要的代码。常见的代码分割方式有三种。
入口起点
入口起点是将代码分割成更小的块的最简单的方法。每个额外的入口点会生成一个文件。这种方式不太适合 SPA 应用，适合多页面应用。
module.exports = {
entry: {
pageOne: './src/pageOne.js',
pageTwo: './src/pageTwo.js',
},
};防止重复
通过使用 Entry 配置手动地分离代码虽然可以满足要求，但此方法具有局限性。如果依赖图中存在重复模块，则重复模块会被完整地打包到各个 bundle 中。可以使用 SplitChunksPlugin 来去除重复的模块。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};动态导入
将代码块分离出来的最佳方式是通过动态导入。动态导入能够让你在代码中使用 “import()” 语法，这样只有当代码块需要被执行时才会被下载。使用 React.lazy 和 Suspense 来支持动态导入。
-- -------------------- ---- -------
------ ------ ------ --------- ---- --------
----- ------------- - ------- -- --------------------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-2. 代码压缩
优化代码是提高加载速度的一个关键。Webpack 4 中，通过配置 mode: production，会自动开启代码压缩功能。你也可以通过配置 TerserWebpackPlugin 和 Optimizations 来手动压缩代码。
-- -------------------- ---- -------
-------------- - -
------------- -
--------- -----
---------- -
--- ---------------------
-------------- -
--------- -
------------- -----
--
--
---
--
--
--3. 图像优化
优化图像文件可以帮助减少应用的整体大小，从而提高加载速度。常用的优化图像文件的方式是通过使用 webp 格式，压缩 jpg 和 png 格式的文件以及使用 SVG （矢量图）格式代替位图。
-- -------------------- ---- -------
------ ---- ---- -------------
------ --- ---- ----------------
------ ------- ---- -----------------
-------- ----- -
------ -
-----
----- ------------- -------------- --
------
--
-完成以上三个步骤后，你的应用会快速的加载并渲染，用户将会获得更好的使用体验。
总结
本文详细介绍了如何使用 webpack 打包 React SPA 应用时如何优化首屏加载时间。从代码分割、代码压缩和图像优化三个角度进行了讲解，同时也提供了示例代码方便读者学习。希望能够对大家前端开发中的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1454148841e9894d891ec