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

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

相关推荐
之恒君2 分钟前
typescript(tsconfig.json - esModuleInterop)
前端·typescript
夏天19952 分钟前
React:聊一聊状态管理
前端·javascript·react.js
李剑一4 分钟前
低代码平台现在为什么不行了?之前为什么行?
前端·面试
鹏多多4 分钟前
vue的监听属性watch的详解
前端·javascript·vue.js
用户42274481246216 分钟前
IndexDB 前端数据库
前端
然我7 分钟前
前端正则面试通关指南:一篇吃透所有核心考点,轻松突围面试
前端·面试·正则表达式
LFly_ice35 分钟前
学习React-11-useDeferredValue
前端·学习·react.js
ホロHoro39 分钟前
学习笔记:JavaScript(4)——DOM节点
javascript·笔记·学习
亮子AI1 小时前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
信看1 小时前
实用 html 小工具
前端·css·html