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

安装相关Npm依赖
分析优化前占比图(预览图)

单条拆分优化
1、排除打包 *.json 文件 + 动态加载

2、echarts、element-plus、jsoneditor 不做外联确保稳定。(可自主选择优化)
3、通过 CDN 方式挂载:markdonwit、xlsx
推荐使用国内镜像:
- BootCDN: BootCDN
- 字节跳动: 字节跳动静态资源公共库
- 引用 +esm 适配 Esm模式

运行 depcheck 查看无用安装依赖
对未使用的依赖进行删除,需要确保不会对项目造成破坏,如 tailwindcss 被检测无使用,实际在使用中,故不能删除。删除后本地确保没问题,再提交!!!
- Unused:未使用依赖
- Missing:丢失依赖

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

全局引入改为局部/按需
1、Element-plus引入及图标
2、路由懒加载及搭配单纯Chunk
- 通过 import 方式载入页面地址
- 根据打包配置中的 output 输出为 单个Chunk,实现按需载入

3、组件抽离及语法糖
- 多页面引用则单独抽离,传值配置
- 减少多层嵌套,提早return
- 命名规范,驼峰命名 + 常量大写
后续如果有更好的优化手段也会同步更新记录。