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. 命名规范,驼峰命名 + 常量大写

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

相关推荐
拆房老料6 小时前
【第四部分:Agentic 智能体设计模式】16. 一个 Prompt 搞不定复杂任务?试试 Prompt Chaining
java·前端·人工智能·设计模式·prompt
曹牧11 小时前
C#:空合并运算符
java·前端·数据库
小羊没烦恼!12 小时前
铁道部新客票系统设计(二)
开发语言·前端·数据库·python·oracle·c#·php
智能直播14 小时前
RK3518:1.5G 内存 + 8G 存储,如何跑起硬件编解码、Web、AI 识别、绿幕特效
前端·人工智能·5g
掘金酱15 小时前
【10.24 特别活动】AI 时代,程序员的新饭碗在哪里?
前端·人工智能·后端
excel16 小时前
多进程环境下使用 PM2 部署 Socket.IO:需要注意什么
前端
IT_陈寒16 小时前
Redis的原子性竟然失效了?记一次分布式锁翻车实录
前端·人工智能·后端
_菜鸟果果17 小时前
高德地图 JS API 2.0 在国产 Linux/ARM 电脑上渲染失败 的排查与解决
linux·开发语言·javascript
时间的情敌17 小时前
《回顾 2018 前端:Vue2 成熟期,Webpack4 发布,PWA 大火》
前端