第五十九章-Vite插件-vite-plugin-compression

1.说明

vite-plugin-compression的npm首页：vite-plugin-compress的增强版，压缩用的。

2.安装

yarn add vite-plugin-compression --dev

3.配置插件

build\vite\plugin\compress.ts：

/**
 * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
 * https://github.com/anncwb/vite-plugin-compression
 */
import type { Plugin } from 'vite';

import compressPlugin from 'vite-plugin-compression';

export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none'): Plugin | Plugin[] {
  const compressList = compress.split(',');

  const plugins: Plugin[] = [];

  if (compressList.includes('gzip')) {
    plugins.push(
      compressPlugin({
        ext: '.gz',
      })
    );
  }
  if (compressList.includes('brotli')) {
    plugins.push(
      compressPlugin({
        ext: '.br',
        algorithm: 'brotliCompress',
      })
    );
  }
  return plugins;
}

4.配置Vite

build\vite\plugin\index.ts：

// ...
import { configCompressPlugin } from './compress';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // The following plugins only work in the production environment
  if (isBuild) {
    // ...
    // rollup-plugin-gzip
    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS));
  }

  return vitePlugins;
}

上一章

第五十八章-Vite插件-vite-plugin-imagemin

下一章

第六十章-Vite插件-vite-plugin-pwa