微信公众号做特效的网站淄博网站推广公司那些

一、项目打包和本地预览

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'"},

2.3、CDN配置

体积较大的非业务js文件，比如React、React-dom可以放在CDN服务器

放在CDN的优点有

1、体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间

2、非业务的js文件，不需要经常做变动，CDN不用频繁更新缓存

如何实现呢？

1、把需要做CDN缓存的文件排除在打包之外

2、以CDN的方式重新引入资源

直接移步至Vue打包优化-加快首屏加载速度

下一章：React学习笔记16：常用的几个Hook函数