vite打包中性能优化方面

1、静态文件按类型分包

build中添加如下代码：

build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    }
  }

2、超大静态资源拆分

build里的output设置内,添加以下代码

 manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }

3、gzip静态资源压缩

 npm i vite-plugin-compression -D
//引入
import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
 plugins: [viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  })]
//在niginx添加
  gzip_static on;

4、清除console和debugger

build里添加terserOptions配置

terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },

5、未完待续