重生之我在学Vue–第17天 Vue 3 项目优化与部署
文章目录
- 重生之我在学Vue--第17天 Vue 3 项目优化与部署
- 前言
- 一、性能优化三板斧
- 1.1 Vite 生产打包配置
- 1.2 性能优化指标分析
- 1.3 进阶优化技巧
- 二、生产环境部署指南
- 2.1 Vercel 部署(推荐)
- 2.2 Netlify 部署
- 2.3 部署前后对比
- 三、实战:优化并部署任务管理系统
- 3.1 今日任务清单
- 3.2 常见问题解决方案
前言
经过前16天的学习,我们已经完成了任务管理系统的核心功能和插件开发。现在是时候让项目**“飞入寻常百姓家”**——通过性能优化和部署让项目真正服务于用户!今日重点:榨干最后一滴性能潜力,一键部署到生产环境!
Vue3 官方中文文档传送点: 生产部署 | Vue.js
记住:优化不是为了炫技,而是为了用户体验和商业价值!
Vue前端成仙之路:Vue 前端成仙之路_野生的程序媛的博客-CSDN博客
GO后端成神之路:Go 后端成神之路_野生的程序媛的博客-CSDN博客
一、性能优化三板斧
1.1 Vite 生产打包配置
在 vite.config.js
中开启全方位优化:
// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig({build: {// 代码分割策略rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor'}}}},// 禁用调试信息sourcemap: false,// 压缩配置minify: 'terser',terserOptions: {compress: {drop_console: true // 移除所有console}}},plugins: [// 可视化分析包体积visualizer({ open: true,gzipSize: true})]
})
1.2 性能优化指标分析
工具 | 分析维度 | 优化建议 |
---|---|---|
Lighthouse | 加载性能/可访问性/SEO | 启用压缩、优化图片、预加载关键资源 |
Chrome DevTools | 网络请求瀑布流 | 减少首屏请求数、启用HTTP2 |
Bundle Analyzer | 模块体积分布 | 按需加载、移除无用依赖 |
实战命令:
# 生成分析报告
npm run build -- --mode analyz# 查看性能评分
npx lighthouse http://localhost:5173 --view
1.3 进阶优化技巧
// 动态加载第三方库(以lodash为例)
const debounce = await import('lodash/debounce').then(m => m.default)// 图片压缩配置(需安装vite-plugin-imagemin)
import imagemin from 'vite-plugin-imagemin'
plugins: [imagemin({gifsicle: { optimizationLevel: 3 },mozjpeg: { quality: 75 },pngquant: { quality: [0.8, 0.9] }})
]
二、生产环境部署指南
2.1 Vercel 部署(推荐)
三步极速部署:
- 安装命令行工具:
npm install -g vercel
- 登录并部署:
vercel login vercel --prod
- 配置环境变量:
# 在Vercel控制台设置 VITE_API_URL=https://your-api.com
2.2 Netlify 部署
通过Git仓库自动部署:
- 在Netlify控制台导入Git仓库
- 配置构建命令:
Build command: npm run build Publish directory: dist
- 添加域名(支持自定义SSL证书)
2.3 部署前后对比
指标 | 优化前 | 优化后 |
---|---|---|
首屏加载时间 | 3.2s | 1.1s |
打包体积 | 1.8MB | 623KB |
请求数 | 32 | 18 |
三、实战:优化并部署任务管理系统
3.1 今日任务清单
-
性能优化:
• [ ] 开启Gzip压缩(配置nginx或使用插件)
• [ ] 添加缓存策略(Cache-Control头部)
• [ ] 优化首屏加载(骨架屏/Suspense) -
部署实施:
# 生产打包 npm run build# 本地预览生产版本 npm run preview# 部署到Vercel vercel --prod
3.2 常见问题解决方案
1. **白屏问题**:- 检查路由模式(history需要服务器配置fallback)- 使用`<base>`标签修正资源路径2. **环境变量失效**:- Vite要求客户端变量必须以`VITE_`开头- 部署平台需要重新配置环境变量3. **跨域问题**:- 开发环境配置proxy:```javascript// vite.config.jsserver: {proxy: {'/api': 'http://localhost:3000'}}
- 生产环境使用Nginx反向代理
### 3.3 扩展挑战
1. **CDN加速**:```javascript// vite.config.jsbuild: {assetsInlineLimit: 4096, // 4KB以下文件转base64rollupOptions: {output: {// 配置CDN路径assetFileNames: 'https://cdn.example.com/[name]-[hash][extname]'}}}
- 监控埋点:
// 使用Sentry监控错误 import * as Sentry from '@sentry/vue'app.use(Sentry, {dsn: 'YOUR_DSN',integrations: [new Sentry.BrowserTracing()],tracesSampleRate: 0.8 })