vite build very slow

[zhoufanglu]

Describe the bug

when i build, in transforming is very slow

it use More than 2 minutes.
Is there any way to optimize it?

Steps to reproduce

this is my vite config

import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite";
import { resolve } from "path";
import { wrapperEnv } from "./build/getEnv";
import { createProxy } from "./build/proxy";
import { createVitePlugins } from "./build/plugins";
import pkg from "./package.json";
import moment from "moment";

const { dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: moment().format("YYYY-MM-DD HH:mm:ss")
};
console.log(moment().format("YYYY-MM-DD HH:mm:ss"), "-----------------");

// @see: https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);

  return {
    base: viteEnv.VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
      }
    },
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__)
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/var.scss";`
        }
      }
    },
    plugins: createVitePlugins(viteEnv),
    esbuild: {
      pure: viteEnv.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : []
    },
    build: {
      outDir: "dist",
      minify: "esbuild",
      // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
      // minify: "terser",
      // terserOptions: {
      // 	compress: {
      // 		drop_console: viteEnv.VITE_DROP_CONSOLE,
      // 		drop_debugger: true
      // 	}
      // },
      // 禁用 gzip 压缩大小报告，可略微减少打包时间
      reportCompressedSize: false,
      // 规定触发警告的 chunk 大小 default 500
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          // 最小化拆分包
          manualChunks: id => {
            if (id.startsWith("virtual:svg-icons-")) {
              return "sprite";
            }
            if (id.includes("node_modules")) {
              const fileName = id.toString().split("node_modules/").pop()!.split("/")[0].toString();
              return fileName;
            }
          },
          // Static resource classification and packaging
          chunkFileNames: chunkInfo => {
            const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split("/") : [];
            const fileName = facadeModuleId[facadeModuleId.length - 2] || "[name]";
            return `assets/js/${fileName}-[name]-[hash].js`;
          },
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
        },
        external: [""]
      }
    }
  };
});

System Info

"vite": "^4.3.9",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-inspect": "^0.8.3",
    "vite-plugin-svg-icons": "^2.0.1",

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sahilgujar007]

facing the same issue, for every save it takes upto 20 seconds build the app and render the app again

[patak-dev]

I think it would be good to try to remove plugins to see which ones are taking so much time. You can also use --profile to get a .cpuprofile and dig into what is the bottleneck for you.

[daughterRui]

你有找到解决方案吗？

[zhoufanglu]

没有，这个别的团队改的项目， 打包从4min->3min， 效果不明显

[Ho-Jack]

update the @vitejs/plugin-legacy can winding build of speed

[totorowechat]

vite-plugin-svg-icons 每一个 transform 都会 load 一次，调用一次fs.glob查找所有svg，该io操作在windows中很慢。可以在 node_module/vite-plugin-svg-icons/dist/index.mjs 中做如下修改，来测试是否有改进。

let svgFilsStats = null <--- add this line  

async function compilerIcons(cache, svgOptions, options) {
  const { iconDirs } = options;
  let insertHtml = "";
  const idSet = /* @__PURE__ */ new Set();
  for (const dir of iconDirs) {
    svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line  
      cwd: dir,
      stats: true,
      absolute: true
    });

建议换一个svg图标库。

---

Every time a transform occurs in vite-plugin-svg-icons, it loads once and calls fs.glob to search for all svgs. This IO operation is very slow in Windows. The following modifications can be made in node_module/vite-plugin-svg-icons/dist/index.mjs to test if there is any improvement.

let svgFilsStats = null <--- add this line  

async function compilerIcons(cache, svgOptions, options) {
  const { iconDirs } = options;
  let insertHtml = "";
  const idSet = /* @__PURE__ */ new Set();
  for (const dir of iconDirs) {
    svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line  
      cwd: dir,
      stats: true,
      absolute: true
    });

You should change to another library.

[zhoufanglu]

vite-plugin-svg-icons 每一个 transform 都会 load 一次，调用一次fs.glob查找所有svg，该io操作在windows中很慢。可以在 node_module/vite-plugin-svg-icons/dist/index.mjs 中做如下修改，来测试是否有改进。

let svgFilsStats = null <--- add this line  

async function compilerIcons(cache, svgOptions, options) {
  const { iconDirs } = options;
  let insertHtml = "";
  const idSet = /* @__PURE__ */ new Set();
  for (const dir of iconDirs) {
    svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line  
      cwd: dir,
      stats: true,
      absolute: true
    });

建议换一个svg图标库。

Every time a transform occurs in vite-plugin-svg-icons, it loads once and calls fs.glob to search for all svgs. This IO operation is very slow in Windows. The following modifications can be made in node_module/vite-plugin-svg-icons/dist/index.mjs to test if there is any improvement.

let svgFilsStats = null <--- add this line  

async function compilerIcons(cache, svgOptions, options) {
  const { iconDirs } = options;
  let insertHtml = "";
  const idSet = /* @__PURE__ */ new Set();
  for (const dir of iconDirs) {
    svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line  
      cwd: dir,
      stats: true,
      absolute: true
    });

You should change to another library.

感谢回答，就是这个插件的问题。。。。我去了之后
从4min -> 32.56s