Vite打包从12.17M -> 7.95M,速度提升≈51.85%

优化策略:安装visualizer看图,针对大区块进行着重优化,配置vite.config,引入CDN。

最终结果

安装相关Npm依赖

分析优化前占比图(预览图)

单条拆分优化

1、排除打包 *.json 文件 + 动态加载
2、echarts、element-plus、jsoneditor 不做外联确保稳定。(可自主选择优化)
3、通过 CDN 方式挂载:markdonwit、xlsx

推荐使用国内镜像:

  1. BootCDN: BootCDN
  2. 字节跳动: 字节跳动静态资源公共库
  3. 引用 +esm 适配 Esm模式

运行 depcheck 查看无用安装依赖

对未使用的依赖进行删除,需要确保不会对项目造成破坏,如 tailwindcss 被检测无使用,实际在使用中,故不能删除。删除后本地确保没问题,再提交!!!

  1. Unused:未使用依赖
  2. Missing:丢失依赖

打包输出配置,采用 esbuild

  1. 生产模式移除 输出/断点
  2. sourcemap:定位错误(自行选择)
  3. treeShake、cache:清理无用代码|缓存(默认true)
  4. output:命名代码分割时创建共享块
  5. external:排除不需要的打包文件/文件夹

全局引入改为局部/按需

1、Element-plus引入及图标

2、路由懒加载及搭配单纯Chunk

  1. 通过 import 方式载入页面地址
  2. 根据打包配置中的 output 输出为 单个Chunk,实现按需载入

3、组件抽离及语法糖

  1. 多页面引用则单独抽离,传值配置
  2. 减少多层嵌套,提早return
  3. 命名规范,驼峰命名 + 常量大写

后续如果有更好的优化手段也会同步更新记录。

相关推荐
扯蛋43813 分钟前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy22 分钟前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉22 分钟前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码1 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点1 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi2 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽2 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start2 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐2 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设
爱喝水的小周2 小时前
《UniApp 页面配置文件pages.json》
前端·uni-app·json