如何使用vite打包让体积变的更小

咱们直接简单明了

在vite.config.ts文件中找到“rollupOptions”配置打包后的模块名称便于查看

rollupOptions: {
  output: {
    chunkFileNames: "chunk/[name]-[hash].js", 
    entryFileNames: "entry/[name]-[hash].js", 
    assetFileNames: "asset/[ext]/[name]-[hash].[ext]",
    manualChunks: (id: any) => {
      if (id.includes("node_modules")) {
        return id
          .toString()
          .split("node_modules/")[1]
          .split("/")[0]
          .toString();
      }
    },
  },
},

chunkFileNames：用于命名代码分割时创建的共享块的模式--->举例（views模块/components模块）

entryFileNames：用于从入口点创建的块的模式--->举例（main.ts）

assetFileNames: 资源资源文件--->举例（assets）

如果想了解更多查看官方文档 rollupjs.org/configurati…

1、使用gzip

开启gzip前

开启gzip后

使用说明

1、pnpm install vite-plugin-compression

2、npm install vite-plugin-compression

3、yran install vite-plugin-compression

引用

在vite.config.ts里面直接引入
import viteCompression from "vite-plugin-compression";
plugins: [ viteCompression()]

gzip官网配置

文档没有指定对于静态资源的压缩配置项、需要使用其他的插件用于静态资源压缩

2、使用vite-plugin-imagemin

vite-plugin-imagemin用于压缩图片

使用方法

pnpm install vite-plugin-imagemin

npm install vite-plugin-imagemin

yarn add vite-plugin-imagemin



在配置文件中

    import viteCompression from "vite-plugin-compression";

    plugins:[
    viteImagemin(
    {
    gifsicle: {
    // gif图片压缩
    optimizationLevel: 3, // 选择1到3之间的优化级别
    interlaced: false, // 隔行扫描gif进行渐进式渲染
      },
      optipng: {
        // png
        optimizationLevel: 7, // 选择0到7之间的优化级别
      },
      mozjpeg: {
        // jpeg
        quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。
      },
      pngquant: {
        // png
        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
        speed: 4, // 压缩速度，1(强力)到11(最快)
      },
      svgo: {
        plugins: [
          // svg压缩
          {
            name: "removeViewBox",
          },
          {
            name: "removeEmptyAttrs",
            active: false,
          },
        ],
      },
    }),]

压缩后的图片大小

整体减少了2M左右

目前对于vite打包使用不多，后续会持续更新...