vite3+vue3 项目打包优化

本文详细介绍了Vite3+Vue3项目打包优化的各种策略,包括依赖视图分析、treeshaking优化、依赖分包、CDN加速、gzip压缩、图片压缩、处理history404问题以及解决浏览器兼容问题。通过示例展示了如何使用lodash-es进行摇树优化,以及如何配置vite.config.ts以实现性能提升。
摘要由CSDN通过智能技术生成

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了,如果你是 “前端架构师” 或者是 “团队核心” 的话,不得不可考虑的一个问题就是性能优化。

说到前端性能优化,个人认为主要有两个方面:

  1. 减少文件的体积,体积小了加载自然就快了。如:首屏优化、CDN加速、UI组件库按需加载 等等
  2. 代码层面的优化。如:组件、样式的抽取,路由懒加载、Vue3性能优化代码层面优化 等等

本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

1. 依赖视图分析(rollup-plugin-visualizer)

优化的主要难点在于从哪里开始去优化。如果不清楚自己的项目问题出现在哪里,就显得比较盲目。我们可以通过插件工具rollup-plugin-visualizer先分析一下项目的文件大小及引用情况,根据分析结果采取对应的文件分包、cdn引入等相关技术有针对性的去优化。

Rollup Plugin Visualizer 是一个依赖分析插件,它提供了多种模式的依赖分析,包括直观的视图分析,sunburst(循环层次图,像光谱)、treemap(矩形层次图,看起来比较直观,也是默认参数)、network(网格图,查看包含关系)、raw-data(原数据模式,json格式), list(列表模式),你可以选择任意一种你喜欢的观察模式。本文采用默认的方式进行依赖分析。

安装

# npm 方式
npm install --save-dev rollup-plugin-visualizer

# yarn 方式
yarn add rollup-plugin-visualizer --dev

vite.config.ts 配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vis
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值