vite 打包配置优化，静态资源合并

静态资源的打包处理

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      // 静态资源打包做处理
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
      }
    }
  }
}

提高静态资源的容量大小

// vite.config.ts
build: {
 chunkSizeWarningLimit: 1000,
}

清除全局的 console.log 和 debug

// vite.config.ts
build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    },
}

gzip 静态资源压缩

下载 gzip 压缩插件

npm i vite-plugin-compression -D

vite.config.ts 配置

import viteCompression from 'vite-plugin-compression'

plugins: [
  viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  }),
],

低版本浏览器兼容

下载插件

npm i @vitejs/plugin-legacy -D

vite.config.ts 配置

import legacyPlugin from '@vitejs/plugin-legacy'

plugins: [
  legacyPlugin({
    targets: ['chrome 52'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
  })
],

完整配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import legacyPlugin from '@vitejs/plugin-legacy'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  mode: 'production',
  plugins: [
    vue(),
    viteCompression({
      // gzip静态资源压缩配置
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
    }),
  ],
  server: {
    port: 4000, // 设置端口号
    host: true, // 开启本机端口地址
    open: true, // 自动打开浏览器
    proxy: {
      // 配置跨域
      '/api': {
        target: '', // 服务地址
        changeOrigin: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 配置根目录
    },
  },
  build: {
    chunkSizeWarningLimit: 1000, // 提高超大静态资源警告大小
    terserOptions: {
      // 清除console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      input: 'index.html',
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
      },
    },
  },
})