why the compilation time increase more than double when I upgrading my vue2 project to [email protected]

[ngd-b]

After upgrading a Vue2 project built with vue-cli to [email protected], the development startup time and compilation time have doubled.

I don't know why this is ? only compilation size decrease 1.1G -> 985M

the startup time has increased from the original 1:20 seconds to 3:30 seconds

My config rsbuild.config.js

import { defineConfig } from "@rsbuild/core";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVue2Jsx } from "@rsbuild/plugin-vue2-jsx";
import { pluginLess } from "@rsbuild/plugin-less";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";
// import { pluginEslint } from "@rsbuild/plugin-eslint";
// import { pluginImageCompress } from "@rsbuild/plugin-image-compress";

const path = require("path");

export default defineConfig({
  plugins: [
    pluginLess({
      lessLoaderOptions: {
        implementation: require("less"),
      },
    }),
    pluginSass({
      sassLoaderOptions: {
        implementation: require.resolve("sass"),
      },
    }),
    pluginVue2(),
    pluginBabel({
      include: /\.(?:js|jsx|tsx)$/,
      exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginVue2Jsx(),
    pluginNodePolyfill(),
    // pluginEslint({
    //   enable: true,
    //   eslintPluginOptions: {
    //     cwd: __dirname,
    //     configType: "flat",
    //     extensions: ["js", "jsx", "vue"],
    //   },
    // }),
    // pluginImageCompress(),
  ],
  html: {
    template: "./public/index.html",
  },
  source: {
    // 指定入口文件
    entry: {
      index: "./src/main.js",
    },
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    include: [],
  },
  tools: {
    rspack(config, { addRules }) {
      addRules([
        {
          test: /\.md$/,
          loader: "url-loader",
        },
      ]);
    },
    bundlerChain(chain, { CHAIN_ID }) {
      // 修改原svg加载的方式，排除掉需要作为图标使用的svg目录
      chain.module
        .rule(CHAIN_ID.RULE.SVG)
        .exclude.add(path.join(__dirname, "./src/assets/svgs"));
      // 增加一条svg的loader，只处理指定目录
      chain.module
        .rule("svg-sprite-loader")
        .test(/\.svg$/)
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({ symbolId: "icon-[name]" })
        .end()
        .include.add(path.join(__dirname, "./src/assets/svgs"))
        .end();
    },
  },
  dev: {
    // lazyCompilation: true,
    progressBar: true,
  },
  server: {
    port: 8080,
  },
  output: {
    inlineStyles: process.env.NODE_ENV === "development",
    polyfill: "usage",
  },
  performance: {
    chunkSplit: {
      strategy: "split-by-experience",
      forceSplitting: {
        echarts: /node_modules[\\/]echarts/,
        elementUi: /node_modules[\\/]element-ui/,
        moment: /node_modules[\\/]moment/,
      },
    },
  },
});

When compiling up to here, will take long time

[chenjiahan]

Can you follow the Build profiling guide and share the profiling files?

[ngd-b]

Ok. I will provide the analysis file. Do you need three kinds or just one

[ngd-b]

I executed build:profile command done. and the dir dist generated file rspack-profile-1747019366094/trace.json, but the file size is 17.59 GB. do you need this?

[chenjiahan]

Maybe you can provide the Node.js profiling result first..It should be smaller

https://rsbuild.dev/guide/debug/build-profiling#nodejs-profiling

[ngd-b]

ok. I provide the profiling file. please check it. what's the probem . thank you!

CPU.20250512.124052.58700.0.001.cpuprofile

[chenjiahan]

From the Node CPU profile, we can see that:

• On the Node.js side, the Vue compiler is the bottleneck
• In the overall build time, the Rust side accounts for a large proportion, let's track here: [Perf] vue2 project upgrade to [email protected]. the compilation time has increased by more than twice rspack#10339