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

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

相关推荐
玉米Yvmi4 小时前
从零理解 CSS 弹性布局:轻松掌控页面元素排布
前端·javascript·css
西洼工作室4 小时前
前端js汉字手写练习系统
前端·javascript·css
程序员爱钓鱼4 小时前
Node.js 编程实战:CSV&JSON &Excel 数据处理
前端·后端·node.js
徐同保4 小时前
n8n+GPT-4o一次解析多张图片
开发语言·前端·javascript
DanyHope4 小时前
LeetCode 128. 最长连续序列:O (n) 时间的哈希集合 + 剪枝解法全解析
前端·leetcode·哈希算法·剪枝
GISer_Jing4 小时前
AI赋能前端:从核心概念到工程实践的全景学习指南
前端·javascript·aigc
|晴 天|4 小时前
前端事件循环:宏任务与微任务的深度解析
前端
不爱吃糖的程序媛4 小时前
Flutter-OH OAuth 鸿蒙平台适配详细技术文档
javascript·flutter·harmonyos
用户4445543654264 小时前
Android开发中的封装思路指导
前端
前端OnTheRun4 小时前
如何禁用项目中的ESLint配置?
javascript·vue.js·eslint