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