vite打包包太大解决方案
文章类型:webpack
发布者:hp
发布时间:2026-07-14
一：查找问题，采用rollup-plugin-visualizer查看包
npm install -D rollup-plugin-visualizer
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
vue(),
visualizer({
open: true, // 打包后自动打开浏览器展示图表
gzipSize: true, // 显示 gzip 后的大小
brotliSize: true // 显示 brotli 后的大小
})
]
})
二：优化方案
（1）：代码分割和懒加载，通过路由懒加载和手动分包减少体积
1：路由懒加载
// router/index.js
const routes = [
{
path: '/dashboard',
// ❌ 错误：静态引入，会打包进主包
// component: Dashboard
// ✅ 正确：动态引入，生成单独 chunk
component: () => import('@/views/Dashboard.vue')
}
]
2：手动分包在 vite.config.js 中配置 rollupOptions.output.manualChunks
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
// 将 node_modules 中的依赖单独打包为 vendor
return 'vendor';
// 进阶：如果想更细粒度控制，比如把 vue 单独拆出来
// if (id.includes('vue')) return 'vue-vendor';
// if (id.includes('element-plus')) return 'ui-vendor';
}
}
}
}
}
})
（2）：Tree Shaking 与按需引入
1：确保使用 ESM 版本
Lodash: 不要使用 import _ from 'lodash'，改用 import debounce from 'lodash-es/debounce' 或直接安装 lodash-es。
2：UI库按需引入
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
（3）：CDN外链大体积依赖，也可vite-plugin-cdn-import 自动化此过程
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
external: ['vue', 'vue-router', 'echarts'], // 告诉 Rollup 这些是外部依赖，不要打包
output: {
globals: {
vue: 'Vue',
'vue-router': 'VueRouter',
echarts: 'echarts'
}
}
}
}
})
<!-- index.html -->
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- 生产环境才加载 CDN -->
<% if (process.env.NODE_ENV === 'production') { %>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
<% } %>
</body>
(4)：压缩与资源优化
1：切换为Terser压缩
npm install -D terser
// vite.config.js
export default defineConfig({
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true, // 移除 console.log
drop_debugger: true // 移除 debugger
}
}
}
})
2：开启Gzip/Brotli预牙刷
npm install -D vite-plugin-compression
// vite.config.js
import compression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
vue(),
compression({
algorithm: 'gzip', // 或 'brotliCompress'
threshold: 10240, // 大于 10kb 的文件才压缩
})
]
})
评论
共0条评论遵守法律,文明用语,共同建设文明评论区
热门文章Copyright © www.cqhxb.com All Rights Reserved | 
渝公网安备50011302222502 | 渝ICP备17004821号 | | 互联网有害举报中心 | 管理员登录
郑重声明：本站部分图片来源互联网，如有侵权请联系
删除
删除
暂无评论，快来发表第一条评论吧~