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静态资源压缩

3.1客户端开启：

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;

3.2服务端开启

//直接在nginx添加
      # 开启或者关闭gzip模块(on|off)
    gzip on;
    # 允许压缩的页面最小字节数, 默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大
    gzip_min_length 1k; 
    # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。例如 4 4k 代表以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。
    gzip_buffers 4 16k; 
    # 识别http的协议版本。由于早期的一些浏览器或者http客户端，可能不支持gzip自解压，用户就会看到乱码，所以做一些判断还是有必要的。
    #gzip_http_version 1.0;
    # gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）。
    gzip_comp_level 2;
    # 匹配MIME类型进行压缩，（无论是否指定）"text/html"类型总是会被压缩的。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 和http头有关系，加个vary头，给代理服务器用的
    gzip_vary off;
    # 表示IE6及以下禁止压缩
    gzip_disable "MSIE [1-6]\.";

3.3 分析：

个人建议使用客户端压缩，减少服务器处理资源
可参考：链接

4、清除console和debugger

build里添加terserOptions配置

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

5、未完待续

参考文献

长风破浪会有时，直挂云帆济沧海