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

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

相关推荐
玄米乌龙茶1232 分钟前
Web 框架(FastAPI / Flask)核心概念
前端·flask·fastapi
问心无愧05133 分钟前
ctf show web 入门66
前端·笔记
Rain50911 分钟前
mini-cc 权限安全:给 AI 戴上枷锁
前端·人工智能·安全·架构·node.js·ai编程
ai_coder_ai17 分钟前
使用web ide开发和调试自动化脚本
前端·ide·自动化
wyc是xxs18 分钟前
用纯 Node.js 写了一个 JS 解释器 — kernel-js-lite
开发语言·javascript·npm·node.js
kaikaile199522 分钟前
盲源分离(BSS)程序代码:信号处理与模态识别
前端·信号处理
之歆27 分钟前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(上)
javascript·mysql·es6
weixin_BYSJ198727 分钟前
基于Django的非物质文化遗产管理系统设计与实现(源码 + 文档)98950
java·javascript·spring boot·python·django·flask·php
এ慕ོ冬℘゜27 分钟前
从零封装企业级通用确认弹窗组件|高复用、低耦合、适配全场景
开发语言·前端·javascript
Bigger27 分钟前
现在面试官竟然这么问问题,你知道吗?😮
前端·人工智能·agent