重生之我在学Vue--第17天 Vue 3 项目优化与部署

重生之我在学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 部署(推荐)

三步极速部署

  1. 安装命令行工具:
    npm install -g vercel
    
  2. 登录并部署:
    vercel login
    vercel --prod
    
  3. 配置环境变量:
    # 在Vercel控制台设置
    VITE_API_URL=https://your-api.com
    

2.2 Netlify 部署

通过Git仓库自动部署:

  1. 在Netlify控制台导入Git仓库
  2. 配置构建命令:
    Build command: npm run build
    Publish directory: dist
    
  3. 添加域名(支持自定义SSL证书)

2.3 部署前后对比

指标优化前优化后
首屏加载时间3.2s1.1s
打包体积1.8MB623KB
请求数3218

三、实战:优化并部署任务管理系统

3.1 今日任务清单

  1. 性能优化
    • [ ] 开启Gzip压缩(配置nginx或使用插件)
    • [ ] 添加缓存策略(Cache-Control头部)
    • [ ] 优化首屏加载(骨架屏/Suspense)

  2. 部署实施

    # 生产打包
    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]'}}}
  1. 监控埋点
    // 使用Sentry监控错误
    import * as Sentry from '@sentry/vue'app.use(Sentry, {dsn: 'YOUR_DSN',integrations: [new Sentry.BrowserTracing()],tracesSampleRate: 0.8
    })
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35021.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

移动端开发基础与常见布局

一、移动端基础 1.浏览器现状 ⑴.PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览 器、百度浏览器、搜狗浏览器、IE浏览器。 ⑵.移动端常见浏览器 UC浏览器&#xff0c;QQ浏览器&#xff0c;欧朋浏览器&#xff0c; 百度手机浏览器&#xff0c;360安全浏览器&am…

[算法] 贪心--矩阵消除游戏

文章目录 1. 题意2. 思路贪心思路1思路1并不正确思路1为什么是错误的?这道题该如何求解?枚举思路是超时的!枚举 贪心 3. 编码 今天咱们来分享一道基础的贪心题目 -> 矩阵消除游戏 对于贪心算法的题目, 我感觉是对于初学者没必要太注重证明过程, 因为这玩意的变数比较大, …

数学——A. K-divisible Sum + D. Exam in MAC

A. K-divisible Sum 题目&#xff1a; 思路&#xff1a; 以下 “[xxx]” 符号均代表向上取整 我们假设总和是sum&#xff0c;那么就有sum k * cnt 要想最大值最小&#xff0c;肯定是要让sum尽可能小&#xff0c;这样每个元素都能变小 最小情况是 sum 恰好等于 n 时&#…

Docker 》》Docker Compose 》》network 网络 compose

docker 默认的网络 三种模式 # 列出所有当前主机上或Swarm集群上的网络 docker network ls#查看网络详情 docker network inspect network名称# 清除未使用的docker网络 docker network prune -f# 创建网络 ocker network create -d bridge 网络名称 docker network create –s…

RabbitMQ延迟消息

文章目录 延迟消息死信交换机延迟消息延迟消息应用场景 延迟消息 生产者在发送消息的时候指定一个时间&#xff0c;消费者不会立即收到该消息&#xff0c;而是在指定时间之后才收到消息&#xff0c;这就是延迟消息。 比如说这么一个场景&#xff0c;用户下单后将商品库存进行…

phpstudy+phpstorm+xdebug【学习笔记】

配置PHPStudy 配置PHPSTORM phpstorm选择PHP版本 配置DEBUG 设置服务器 编辑配置 学习参考链接&#xff1a;&#xff1a;https://blog.csdn.net/m0_60571842/article/details/133246064

58.Harmonyos NEXT 图片预览组件架构设计与实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT 图片预览组件架构设计与实现原理 文章目录 Harmonyos NEXT 图片预览组件架构设计与实现原理效果预览一、组件架构概述1. 核心组件层…

Android 手机启动过程

梳理 为了梳理思路&#xff0c;笔者画了一幅关于 Android 手机启动的过程图片内容纯属个人见解&#xff0c;如有错误&#xff0c;欢迎各位指正

Chat-TTS-UI:文字转语音 - 本地部署方案

Chat-TTS-UI 是一个基于 ChatTTS 模型的本地网页界面,专为满足用户在信息过载时代轻松获取大量文字信息的需求而设计。它支持中英文混合输入、多种音色选择,并提供 API 接口,方便开发者集成到其他应用中。其简洁易用的网页界面、细粒度控制以及 GPU 加速等高级功能,使其广泛…

11. Pandas :操作Excel文件(Excel报表的案例研究)

从一个装有各种 Excel 文件的文件夹开始&#xff0c;这些文件需要被整合到 Excel 报表中。 它们包含了虚构的电信运营商在全美各营业厅的套餐&#xff08;金、银、铜&#xff09;销售情况。每个月有两个文件&#xff0c;子文件夹 new 中的是新用户&#xff0c;子文件夹 existin…

一周学会Flask3 Python Web开发-SQLAlchemy添加数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili SQLAlchemy提供session.add()方法添加model实体数据&#xff0c;以及提供session.commit()提交事务。 首先list.html加一个添…

大型语言模型与强化学习的融合:迈向通用人工智能的新范式——基于基础复现的实验平台构建

1. 引言 大型语言模型&#xff08;LLM&#xff09;在自然语言处理领域的突破&#xff0c;展现了强大的知识存储、推理和生成能力&#xff0c;为人工智能带来了新的可能性。强化学习&#xff08;RL&#xff09;作为一种通过与环境交互学习最优策略的方法&#xff0c;在智能体训…

Axure大屏可视化原型模板及素材:数据可视化的高效解决方案

数据可视化已成为企业决策、运营分析、市场洞察的重要工具。数据可视化大屏&#xff0c;作为数据展示和交互的直观平台&#xff0c;能够实时呈现关键数据&#xff0c;帮助企业快速做出决策。Axure作为原型设计领域的领先工具&#xff0c;以其丰富的组件库、强大的交互设计能力和…

图片填充容器,如何描述

【图片需要完全填充/拉伸以适应容器尺寸&#xff0c;不保持原始比例&#xff0c;使用 object-fit: fill 属性实现】 效果&#xff1a; 代码案例&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8">&l…

缓存和客户端数据存储体系(Ark Data Kit)--- 应用数据持久化(首选项持久化、K-V、关系型数据库)持续更新中...

Core File Kit做怎删改查操作不便&#xff0c;用Ark Data Kit。 功能介绍 ArkData &#xff08;方舟数据管理&#xff09;为开发者提供数据存储、数据管理和数据同步能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠以及共享访问等管…

RUOYI框架在实际项目中的应用三:Ruoyi微服务版本-RuoYi-Cloud

如需观看Ruoyi框架的整体介绍&#xff0c;请移步&#xff1a;RUOYI框架在实际项目中的应用一&#xff1a;ruoyi简介 一、Ruoyi微服务版本-Ruoyi微服务版本 1、官方资料 1&#xff1a;代码地址&#xff1a;https://gitee.com/y_project/RuoYi-Cloud.git 2&#xff1a;文档介绍…

windbg集成python环境(pykd)

背景: 调试FPU指令过程时&#xff0c;需要一直跟踪FPU Status寄存器TOP字段(ST寄存器对应的BC寄存器)&#xff0c;TOP寄存器位于FPU Status[13:11]&#xff0c;这种转换过程并非一目了然(如下图)&#xff1a; [Disassembly窗口fld指令执行后&#xff0c;Registers窗口中fpsw的…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

【算法】双指针、递归与回溯、排序、查找

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 持续更新中...1、双指针移动零复写零快乐数长度最小的子数组dd爱框框 2、递归与回溯3、排序算法4、查找算法 持续更新中… 1、双指…

How to install cangjie on Linux mint 22.1

概述 仓颉编程语言是一款面向全场景智能的新一代编程语言&#xff0c;主打原生智能化、天生全场景、高性能、强安全。主要应用于鸿蒙原生应用及服务应用等场景中&#xff0c;为开发者提供良好的编程体验。 今天&#xff0c;我们介绍一下仓颉语言在Linux mint 22.1上的安装。 …