The speed of HMR is lower than vue-cli5,Why?

[Zhengy1995]

I've make a migration from vue-cli5 to rsbuild by official doc,the HMR takes more time, it's about 12s now,but original is 6s,is there any config can improve it fastly like vite?

[chenjiahan]

The Vue compiler is slow, try lazy compilation: https://rsbuild.dev/config/dev/lazy-compilation

[Zhengy1995]

I‘ve tried to enable it,but it seems does not work well,still takes the same time.

[chenjiahan]

Rspack provides experiments.incremental to speed up HMR, would you like to try it?

https://rspack.dev/config/experiments#experimentsincremental

export default defineConfig({
  tools: {
    rspack: {
      experiments: {
        incremental: process.env.NODE_ENV === 'development',
      },
    },
  },
});

[Zhengy1995]

emmm.....I tried it just now, you can not image what happened, my application started loading infinitely, by the way i used wujie to loading it, and it's normal when loading independently, but the HMR has no any improvement

[chenjiahan]

Can you provide a reproducition repo?

[Zhengy1995]

I can provide the rsbuild.config

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { name } from './package.json';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/rspack';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { codeInspectorPlugin } from 'code-inspector-plugin';
import MonacoPlugin from 'ps-monaco-editor-webpack-plugin';
import { pluginSass } from '@rsbuild/plugin-sass';

const port = +(process.env.VUE_APP_PORT ?? 3200);
const { VUE_APP_BASE_API, VUE_APP_TARGET_URL, VUE_APP_TARGET_BASE_API } =
  process.env;

const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] });

export default defineConfig({
  plugins: [
    pluginVue(),
    pluginSass({
      sassLoaderOptions: {
        sassOptions: {
          silenceDeprecations: ['import'],
        },
      },
    }),
  ],
  html: {
    template: './public/index.html',
  },
  source: {
    entry: {
      index: './src/main.ts',
    },
    define: publicVars,
  },
  server: {
    port,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      [VUE_APP_BASE_API ?? '']: {
        target: VUE_APP_TARGET_URL,
        changeOrigin: true,
        pathRewrite: {
          [`^${VUE_APP_BASE_API}`]: VUE_APP_TARGET_BASE_API,
        },
      },
    },
  },
  output: {
    assetPrefix: 'auto',
    sourceMap: {
      js: process.env.NODE_ENV === 'development' ? 'eval' : false,
    },
  },
  tools: {
    rspack: {
      module: {
        noParse: [
          require.resolve('typescript/lib/typescript.js'),
        ],
      },
      resolve: {
        fallback: {
          path: require.resolve('path-browserify'),
          crypto: false,
          fs: false,
        },
      },
      output: {
        library: `${name}-[name]`,
        libraryTarget: 'umd',
        chunkLoadingGlobal: `webpackJsonp_${name}`,
      },
      plugins: [
        AutoImport({
          imports: ['vue'],
          resolvers: [
            ElementPlusResolver(),
            IconsResolver(),
          ],
          // dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
          dts: false,
        }),
        Components({
          resolvers: [
            ElementPlusResolver(),

            IconsResolver({
              prefix: 'i',
              alias: {
                'ps-icon': 'ps',
              },
              customCollections: ['ps'],
              enabledCollections: ['ep', 'ps'],
            }),
          ],
          dts: false,
        }),
        Icons({
          compiler: 'vue3',
          autoInstall: true,
          customCollections: {
            ps: FileSystemIconLoader(
              'src/assets/svg',
              (svg) =>
                svg
                  .replace(/^<svg /, '<svg fill="currentColor" ')
                  .replace(/class="icon" /, '') // 移除iconfont的样式
            ),
          },
        }),
        new MonacoPlugin({ languages: ['typescript', 'javascript', 'lua'] }),
      ],
    },
    bundlerChain: (config, { CHAIN_ID }) => {
      config.module
        .rule(CHAIN_ID.RULE.FONT)
        .type('asset/inline')
        .set('generator', {});
      config.module
        .rule(CHAIN_ID.RULE.IMAGE)
        .type('asset/inline')
        .set('generator', {});
      config.module
        .rule(CHAIN_ID.RULE.SVG)
        .type('asset/inline')
        .set('generator', {});
      config.plugin('code-inspector-plugin').use(
        codeInspectorPlugin({
          bundler: 'rspack',
        })
      );
      config.module
        .rule('worker')
        .test(/\.work\.(c|m)?js$/i)
        .use('worker')
        .loader('worker-rspack-loader')
        .options({
          inline: 'fallback',
        });
    },
  },
  moduleFederation: {
    options: {
      name: 'modeling',
      exposes: {
        './Notification': './src/components/remote/Notification/index.vue',
        './notificationMock':
          './src/components/remote/Notification/interfaceMock.ts',
      },
      filename: 'v1/remoteEntry.js',
      shared: ['vue', 'element-plus'],
    },
  },
});

[dingff]

remove the code-inspector-plugin