IT俱乐部 JavaScript Vue3+Vite4项目进行性能优化的配置方案

Vue3+Vite4项目进行性能优化的配置方案

发布: 2025年 4月 29日 64阅读

一、基础性能优化配置（vite.config.ts）

1. Gzip 压缩加速

1
2
3
4
5
6
7
8
9
10
import viteCompression from 'vite-plugin-compression';
 
// plugins 数组中添加
viteCompression({
  verbose: true, // 显示压缩日志
  threshold: 10240, // 超过10kb的文件才压缩
  algorithm: 'gzip', // 算法可选brotliCompress
  ext: '.gz',
  deleteOriginFile: false // 根据服务器配置决定是否删除源文件
})

作用：预生成.gz文件，Nginx等服务器直接发送压缩包

业务场景：

  • 高并发场景建议开启（需服务器配合）
  • 静态资源托管CDN时建议删除源文件（deleteOriginFile: true）

2. 资源压缩优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { viteStaticCopy } from 'vite-plugin-static-copy';
 
// 图片压缩（需安装 vite-plugin-imagemin）
import viteImagemin from 'vite-plugin-imagemin';
 
export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 65 },
      pngquant: { quality: [0.65, 0.9] },
      svgo: {
        plugins: [{ name: 'removeViewBox' }, { name: 'cleanupIDs' }]
      }
    }),
    // 静态资源复制插件
    viteStaticCopy({
      targets: [
        { src: 'public/static-assets', dest: 'assets' }
      ]
    })
  ]
}

作用：

  • 图片压缩：降低图片体积（适合中大型图片资源项目）
  • 静态资源分类：通过viteStaticCopy分离高频更新资源

业务场景：

  • 图片为主的展示型网站必须开启
  • 管理后台类项目可酌情降低压缩率（quality: 75）

3. 分包策略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            if (id.includes('vue')) return 'vue-core';
            if (id.includes('lodash')) return 'lodash';
            return 'vendor';
          }
          if (id.includes('src/components')) return 'components';
        },
        chunkFileNames: 'js/[name]-[hash].js'
      }
    }
  }
}

分包规则：

  • vue-core：Vue核心库单独分包
  • vendor：第三方依赖包
  • components：业务组件独立分包

业务场景：

  • 多入口应用：按路由入口分包
  • 组件库项目：按功能模块分包

4. 按需加载

1
2
3
4
5
6
7
// 路由配置示例
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
  }
]

实现方式：

路由级：动态import()语法

组件级：defineAsyncComponent

UI库按需加载（以Element Plus为例）：

1
2
3
4
5
6
7
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
Components({
  resolvers: [ElementPlusResolver()],
  dts: true // 生成类型声明文件
})

5. 热更新配置

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
  server: {
    hmr: {
      overlay: true, // 显示错误覆盖层
      protocol: 'ws',
      host: 'localhost',
      port: 3000
    },
    watch: {
      usePolling: true // Docker环境需要开启
    }
  }
}

调试技巧：

  • 开发环境禁用缓存：server.headers设置Cache-Control: no-store
  • 跨设备开发：设置host: '0.0.0.0'

6. 路径别名配置

1
2
3
4
5
6
7
8
9
10
import path from 'path';
 
export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '#': path.resolve(__dirname, './types')
    }
  }
}

配套设置：

1
2
3
4
5
6
7
8
9
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "#/*": ["./types/*"]
    }
  }
}

7. Sourcemap 策略

1
2
3
4
5
export default {
  build: {
    sourcemap: process.env.NODE_ENV === 'production' ? 'hidden' : true
  }
}

模式说明：

  • 开发环境：完整sourcemap
  • 生产环境：hidden-source-map（仅生成.map文件不上传）
  • 错误监控：接入Sentry时需开启sourcemap上传

二、进阶优化方案

1. CDN 加速

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createHtmlPlugin } from 'vite-plugin-html';
 
export default {
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          cdnVue: ''
        }
      }
    })
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
}

2. 预加载优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // ...其他配置
        },
        assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
      }
    }
  }
}
 
// index.html 添加预加载

三、业务场景配置策略

场景1：高并发门户网站

配置重点：

1. 开启Gzip + Brotli双重压缩

2. 所有静态资源上传CDN

3. 使用HTTP2服务器推送

4. 配置强缓存策略（Cache-Control: public, max-age=31536000）

示例配置：

1
2
3
build: {
  assetsInlineLimit: 4096, // 4kb以下资源转base64
}

场景2：后台管理系统

配置重点：

1. 按功能模块分包

2. 保留详细sourcemap便于调试

3. 开发环境优化HMR速度

示例配置：

1
2
3
4
5
server: {
  watch: {
    ignored: ['!**/node_modules/your-package/**'] // 忽略无关模块监听
  }
}

场景3：移动端H5应用

配置重点：

1. 首屏资源内联（critical CSS）

2. 图片格式优先使用WebP

3. 开启SSR或预渲染

示例配置：

1
2
3
4
5
6
7
8
9
css: {
  postcss: {
    plugins: [
      require('postcss-critical-css')({
        outputPath: 'critical'
      })
    ]
  }
}

四、调试与分析工具

打包分析：

1
2
3
4
5
6
npm install rollup-plugin-visualizer -D
 
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
 
plugins: [visualizer({ open: true })]

性能检测：

1
2
3
4
5
// main.ts
import { performance } from 'perf_hooks';
if (import.meta.env.DEV) {
  performance.mark('app-start');
}

五、注意事项

压缩兼容性：

  • 确保服务器正确配置Content-Encoding响应头
  • 旧版浏览器需检测是否支持Brotli

缓存策略：

  • 修改文件名哈希规则（build.rollupOptions.output.[assetFileNames|entryFileNames]）
  • 使用manifest.json管理版本号

安全优化：

  • 生产环境禁用sourcemap
  • 设置build.minify: 'terser'并配置混淆参数

到此这篇关于Vue3+Vite4项目进行性能优化的配置方案的文章就介绍到这了,更多相关Vue3 Vite4性能优化内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/15097.html
27赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部