开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情
项目本地预览
本地预览打包后的项目，前提是接口是允许被跨域的，或者自己想办法代理
使用步骤
- 全局安装本地服务包
yarn add -g serve该包提供了serve命令，用来启动本地服务 - 在项目根目录中执行命令
serve -s ./build在build目录中开启服务器 - 在浏览器中访问：
http://localhost:3000/预览项目
打包体积分析
能够分析项目打包体积，从而有针对性的去优化，将大的资源拆包或者动态引入 通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化
使用步骤
-
安装分析打包体积的包：
yarn add source-map-explorer -
在 package.json 中的 scripts 标签中，添加分析打包体积的命令
-
对项目打包：
yarn build（如果已经打过包，可省略这一步） -
运行分析命令：
yarn analyze -
通过浏览器打开的页面，分析图表中的包体积
核心代码：
package.json 中：
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
}
优化-路由懒加载
能够对路由进行懒加载实现代码分隔
使用步骤
-
在 App 组件中，导入 Suspense 组件
-
在 路由Router 内部，使用 Suspense 组件包裹组件内容
-
为 Suspense 组件提供 fallback 属性，指定 loading 占位内容
-
导入 lazy 函数，并修改为懒加载方式导入路由组件
代码实现
App.js
import './App.css'
import { Route, Routes } from 'react-router-dom'
import AutoComponent from './components/AutoComponent'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import { history } from '@/utils'
// 导入必要组件
import { lazy, Suspense } from 'react'
// 按需导入路由组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
function App () {
return (
<HistoryRouter history={history}>
<div className="App">
<Suspense
fallback={
<div
style={{
textAlign: 'center',
marginTop: 200
}}
>
loading...
</div>
}
>
<Routes>
<Route path='/' element={
<AutoComponent><Layout /></AutoComponent>
}>
<Route index element={<Home />}></Route>
<Route path='/article' element={<Article />}></Route>
<Route path='/publish' element={<Publish />}></Route>
</Route>
<Route path='/login' element={<Login />}></Route>
</Routes>
</Suspense>
</div>
</HistoryRouter >
)
}
export default App
查看效果
我们可以在打包之后，通过切换路由，监控network面板资源的请求情况，验证是否分割成功
