vue打包优化方案都有哪些?

Vue 项目在开发模式下没什么性能问题,但打包上线后如果没有优化,可能会遇到 首屏加载慢、包体积过大、交互卡顿 等情况。常见的 Vue 打包优化方案可以分为以下几个层面:


一、代码层优化

  1. 按需引入组件库

    • 使用 babel-plugin-import 或 Vite 的 unplugin-vue-components,避免一次性打包整个 UI 库。

    • 示例:

      复制代码
      // 只引入用到的组件
      import { Button, Table } from 'ant-design-vue'
  2. 路由懒加载

    • 使用 import() 动态导入,拆分路由页面。

      复制代码
      const Home = () => import('@/views/Home.vue')
  3. 第三方库拆分

    • 体积特别大的库(如 ECharts、Lodash、Moment.js)

      • 使用 按需引入(lodash-es + babel-plugin-lodash)

      • 替换为更轻量库(如 dayjs 替代 moment)

      • 通过 CDN 引入并配置 externals,不打进 bundle。

  4. 减少不必要的依赖

    • 使用 webpack-bundle-analyzer 分析包体积,删除未用到的库。

    • 对小功能模块,尽量自己写,而不是引入大库。


二、构建层优化

  1. 开启代码压缩 & Tree Shaking

    • Webpack/Vite 默认支持,会移除无用代码。

    • 可以配置 TerserPlugin 去除 console.logdebugger

      复制代码
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true, drop_debugger: true } }
      })
  2. CSS 优化

    • 使用 purgecss / unplugin-vue-components 自动清理未使用的 CSS。

    • 开启 cssnano 压缩 CSS。

  3. 分包策略

    • Webpack:通过 splitChunks 拆分 vendor、common、async。

    • Vite:build.rollupOptions.output.manualChunks 控制代码分块。

  4. 开启 Gzip / Brotli 压缩

    • 使用 compression-webpack-plugin 或 Nginx 配置 gzip。

    • Gzip 后体积一般能减少 60%-70%。

  5. 图片优化

    • Webpack:image-webpack-loader

    • Vite:vite-plugin-imagemin

    • 大图片转为 懒加载 + CDN ,小图转为 base64 内联

  6. 缓存优化

    • 输出文件名加 [contenthash],确保浏览器缓存生效。

    • 将 runtime、vendor 等长期不变的文件单独打包,减少二次访问体积。


三、运行时优化

  1. 首屏加载优化

    • 路由懒加载 + 骨架屏 / Loading 占位。

    • 静态资源使用 CDN 加速。

  2. 懒加载优化

    • 组件懒加载、图片懒加载(vue-lazyload)。
  3. 服务端渲染 SSR / 预渲染 Prerender

    • SSR(Nuxt.js)或使用 prerender-spa-plugin,减少首屏白屏。
  4. 虚拟滚动、大数据优化

    • 表格、长列表使用 vue-virtual-scroller 或手写虚拟滚动。

    • 避免大数据一次性渲染。


四、运维层优化

  1. CDN 加速

    • 静态资源(JS、CSS、图片)托管到 CDN。

    • Vue、Vuex、Vue Router 等核心库走 CDN,减少打包体积。

  2. HTTP/2 + 浏览器缓存

    • 开启 HTTP/2 多路复用,减少请求开销。

    • 设置合理的缓存策略(强缓存、协商缓存)。

  3. 分环境构建

    • 开发、测试、生产分开配置,避免引入无用的调试工具。

✅ 总结一下:

Vue 打包优化一般流程是 代码层按需引入 + 构建层拆包压缩 + 运行时懒加载 + 运维层缓存/CDN


相关推荐
落一落,掉一掉4 分钟前
第十三周前端加密绕过
前端
前端初见19 分钟前
快速上手TypeScript,TS速通
javascript·ubuntu·typescript
Onlyᝰ1 小时前
前端tree树
javascript·vue.js·elementui
高德开放平台1 小时前
实战案例|借助高德开放平台实现智慧位置服务:路线导航的开发与实践
前端·后端
hemoo2 小时前
如何让echart的lengend在指定位置换行
javascript·echarts
老前端的功夫2 小时前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者2 小时前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
Dorian_Ov02 小时前
GeoPandas+DataFrame实现shapefile文件导入PostGIS数据库
前端·gis
葡萄城技术团队2 小时前
Vue 生态下前端 Excel 导入导出终极方案:SpreadJS 实战指南
vue.js
哟哟耶耶2 小时前
Starting again company 03
前端·javascript·vue.js