当前位置：首页 > article >正文

React学习笔记15

article 2025/3/14 0:55:52

一、项目打包和本地预览

1.1、项目打包

打包指的是将项目中的源代码和资源文件进行处理，生成可在生产环境中运行的静态文件的过程

打包命令

npm run build

1.2、本地预览（模拟服务器运行项目）

本地预览是指在本地通过静态服务器模拟生产服务器运行项目的过程

安装本地服务包

npm i -g serve

运行命令

serve -s ./build

在浏览器中访问http://localhost:300/

二、打包优化

2.1、路由懒加载

什么是路由懒加载？

路由懒加载是指路由的js资源只有在被访问时才会动态获取，目的是为了优化项目的首次打开时间

如何配置？

1、把路由修改为由React提供的lazy函数进行动态导入

2、使用React内置的Suspense组件包裹路由中element选项对应的组件

import {createBrowserRouter} from 'react-router-dom'
import { lazy, Suspense } from 'react'


// 1、lazy函数对组件进行导入
const Login = lazy(()=>import('@/pages/Login'))


const router = createBrowserRouter([
    {
        path:'/',
        element:<Suspense fallback={'加载中'}><Login/></Suspense>
    }
])

export default router

2.2、包体积分析

通过可视化的方式，直观的体现项目中各种包打包之后的体积大小，方便做优化

这里提供一个插件：source-map-explorer

安装：

npm i source-map-explorer

在package.json中配置命令

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "analyze":"source-map-explorer 'build/static/js/*.js'"
  },