vite开启gzip压缩和代码分割-保证你收获满满

为什么要开启gzip压缩

有些时候，我们我们的打包后的代码文件体积比较大。
我们就需要对大文件进行压缩。增加渲染速度

vite开启gzip压缩

下载插件  yarn add vite-compression-plugin -D 

在vite.config.ts 配置如下
import Compression from 'vite-compression-plugin'
export default defineConfig({
  plugins: [
    //你的其他插件
    Compression()
  ]
})

通过上面的图片对比你也许发现了。
会将每一个文件进行gzip压缩，其实这样是不好。
我们将每一个文件进行压缩后，虽然减少了项目的体积。
但是浏览器是不能直接读取压缩文件的，它还有一个解压的动作。这个动作是需要时间。
我们的本意让它变快，这样一来反而适得其反。
那么我们能不能够只对某一些大的文件进行gzip压缩，而小文件我们就不进行gzip压缩。
是可以的。vite-compression-plugin有几个配置项
插件的地址：https://github.com/vbenjs/vite-plugin-compression

只对超出600kb的文件进行 gzip

在vite.config.ts 配置如下
import Compression from 'vite-compression-plugin'
export default defineConfig({
  plugins: [
    Compression({
      threshold: 614400, //如果大于1024*600=614400b的资源将会被压缩成为gzip
    })
  ]
})

nginx 支持 gzip

开启模块之前可以查看是否有模块：--with-http_gunzip_module --with-http_gzip_static_module
配置作用域 在 http, server, location 都可以

#开启gzip功能
gzip on; 

#开启gzip静态压缩功能
gzip_static on; 

#gzip缓存大小
gzip_buffers 4 16k;

#gzip http版本
gzip_http_version 1.1;

#gzip 压缩级别 1-10 
gzip_comp_level 5;

#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

当我们打包后，出现了提示，喊我们进行代分割

代码分割

下载代码分割的插件: npm i vite-plugin-chunk-split -D

在vite.config.ts 配置如下
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
plugins: [
    //你的其他插件
    chunkSplitPlugin({
      strategy: "all-in-one", // 'unbundle' || 'default'
    }),
],

vite-plugin-chunk-split参数

type packageInfo = string | RegExp;
type Strategy = 默认拆包方式('default') || 
所有文件打包到一起( 'all-in-one') || 实现不打包的效果，一个文件一个 chunk('unbundle')

export interface ChunkSplitOptions {
  strategy?: Strategy;
  customSplitting?: CustomSplitting;
}
地址：https://github.com/sanyuan0704/vite-plugin-chunk-split/blob/master/README-CN.md

Strategy:all-in-one 所有文件打包到一起( 'all-in-one')

Strategy:default

Strategy:unbundle 实现不打包的效果，一个文件一个 chunk('unbundle')

总结

个人觉得这个代码分割的这几个默认配置项，并不是特别好。
因为分割之后，代码仍然存在体积较大的文件。
还不如开启gzip压缩好。
如果你觉得我写的不错的话，给我点一个赞。求求你了。