【node】vite常用配置

分块优化

https://cn.vitejs.dev/config/build-options.html#build-chunksizewarninglimit
https://cn.vitejs.dev/config/build-options.html#build-rollupoptions
https://rollupjs.org/configuration-options/#output-manualchunks

配置(对象形式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default {
  build: {
    chunkSizeWarningLimit: 1024,
    rollupOptions: {
      output: {
        manualChunks: {
          monacoeditor: ["monaco-editor"],
          quill: ["quill"],
          lodash: ["lodash"],
          lib: ["sortablejs", "vxe-table", "xe-utils"],
          vlib: ["vue", "vue-router", "vue-i18n", "element-plus"],
        },
      },
    },
  },
};

配置(函数形式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
  build: {
    chunkSizeWarningLimit: 1024,
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 如果是包含 node_modules 则打包到 vendor.js 中
          if (id.includes("node_modules")) {
            return "vendor";
          }
        },
      },
    },
  },
};

打包资源分类

https://cn.vitejs.dev/config/build-options.html#build-rollupoptions
https://rollupjs.org/configuration-options/#output-entryfilenames
https://rollupjs.org/configuration-options/#output-chunkfilenames
https://rollupjs.org/configuration-options/#output-assetfilenames

1
2
3
4
5
6
7
8
9
10
11
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "static/js/[name]-[hash].js",
        chunkFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
      },
    },
  },
};

scss 自动导入

https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions

1
2
3
4
5
6
7
8
9
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`,
      },
    },
  },
};

打包去掉 console

https://esbuild.github.io/api/#drop

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => ({
  esbuild: {
    // 移除 debugger 与 全部 console.*
    drop: mode === "production" ? ["debugger", "console"] : [],
    // 移除 指定 console.*
    // pure: mode === "production" ? ["console.log"] : [],
  },
}));

别名

1
2
3
4
5
6
7
8
9
10
import { fileURLToPath, URL } from "node:url";

export default {
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      // ...
    },
  },
};

setup 指定组件名称

1
npm i -D vite-plugin-vue-setup-extend
1
2
3
4
5
import vitePluginVueSetupExtend from "vite-plugin-vue-setup-extend";

export default {
  plugins: [vitePluginVueSetupExtend()],
};
1
<script setup name="MyComponent"></script>

gzip 压缩

https://github.com/vbenjs/vite-plugin-compression

1
npm i -D vite-plugin-compression
1
2
3
4
5
6
7
8
9
10
11
import compression from "vite-plugin-compression";

export default {
  plugins: [
    compression({
      ext: ".gz",
      threshold: 1024, // 单位：字节。大于该参数会被压缩 gzip
      deleteOriginFile: false,
    }),
  ],
};

SVG 自动引入

https://www.npmjs.com/package/vite-plugin-svg-icons

1
npm i -D vite-plugin-svg-icons
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "node:path";
import { fileURLToPath } from "node:url";

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(fileURLToPath(new URL("./", import.meta.url)), "src/assets/icons/svg")],
      symbolId: "icon-[dir]-[name]",
      svgoOptions: true,
    }),
  ],
};

打包排除 js 库使用 CDN 引入

https://rollupjs.org/configuration-options/#external

排除后，在 index.html 中引入 CDN 地址。

1
2
3
4
5
6
7
export default {
  build: {
    rollupOptions: {
      external: ["echarts"], // 替换为你想排除的库名
    },
  },
};

打包模块可视化分析

https://www.npmjs.com/package/rollup-plugin-visualizer

1
npm i -D rollup-plugin-visualizer
1
2
3
4
5
import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [visualizer()],
};