持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

项目打包

今天开始学习一些基于React脚手架相关的其他技术。在脚手架里面写到了很多实例代码，使用npm start或者yarn start启动项目：

这里脚手架模拟了一个服务器环境，有服务器地址和端口，但是实际在线上生产生产时候需要把前端代码编译成静态文件的形式部署到真正的服务器环境，一般是Nginx环境中指定前端静态文件入口文件。这就需要把代码打包。

前端项目打包同时能减少代码体积。可以测试一下，React脚手架打包命令是npm build或者yarn build。在项目根目录会生成一个build文件夹就是整个项目的编译后的代码。

我自己应Docker模拟一下生产环境试一试：

docker run  -d --name build-test -p 8080:80   -v /D/CodeProject/ReactProject/bilibiliStudy/hello-react/build:/usr/share/nginx/html nginx

体积减少了很多。第一次加载也快了很多。

路由懒加载

懒加载也叫按需加载，代码分页，很少见前卫的前端技术，使用路由懒加载可以解决一些性能问题，特别是优化首页速度。不需要一次加载全部的js文件。

可以看看之前打包后的项目结构：

现在把这个about 这个路由组件变成懒加载

App.js

...
import React, { Suspense ,lazy} from "react";
// import About from './pages/About'
const About = lazy(() => import('./pages/About') );
...
<Routes>
        <Route path="/index" element={<Index />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<Suspense fallback={<div>lazy加载中......</div>
        }>< About /> </Suspense>} /> 
        <Route path="/" element={<Navigate to="/index" />} />

</Routes>
...

通过React的lazy函数配合和import()函数冬天加载路由组件路由组件的代码会被分开，再删掉build文件夹再打包一次试下：

3个js文件变成了5个，效果如图：

如图所示在Suspense组件中使用了fallback方法指定了懒加载之前显示的内容。

React 学习笔记（29）React 项目打包 & 路由懒加载使用(React Route6)

项目打包

路由懒加载

App.js