close
  • 简体中文

      • 第二步：注册插件

      依赖安装完成后，你需要在项目中接入 Rsdoctor 插件，下面是一些常见工具和框架的示例：

      Rspack 项目

      在 rspack.config.js 的 plugins 中初始化 RsdoctorRspackPlugin 插件，参考：

      rspack.config.js
      const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  // ...
  plugins: [
    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // 插件选项
      }),
  ].filter(Boolean),
};
      • Options: 插件提供了一些配置项，请参考 Options。

      Rsbuild 项目

      Rsbuild 内置了对 Rsdoctor 的支持，不需要手动注册插件。详见 Rsbuild - 使用 Rsdoctor。

      Webpack 项目

      在 webpack.config.js 的 plugins 中初始化 RsdoctorWebpackPlugin 插件，参考：

      webpack.config.js
      const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
    process.env.RSDOCTOR &&
      new RsdoctorWebpackPlugin({
        // 插件选项
      }),
  ].filter(Boolean),
};
      • Options: 插件提供了一些配置项，请参考 Options。

      Modern.js 项目

      在 modern.config.ts 的 tools.bundlerChain 中初始化插件，参考：

      modern.config.ts
      import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  // ...
  tools: {
    rspack(config, { appendPlugins }) {
      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // 插件选项
          }),
        );
      }
    },
  },
};
      • Options: 插件提供了一些配置项，请参考 Options。
      Tip

      对于使用 Modern.js webpack 模式的项目，请使用 tools.webpack 注册 RsdoctorWebpackPlugin 插件。

      Next.js 项目

      第一步：注册 Rsdoctor 插件

      在 next.config.ts 的 Rspack 配置(webpack 配置) 中初始化 RsdoctorRspackPlugin（RsdoctorWebpackPlugin） 插件。

      Rspack
      webpack
      next.config.ts
      import type { NextConfig } from 'next';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

const nextConfig: NextConfig = {
  /* config options here */
  webpack: (config) => {
    if (config.name === 'client') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
        }),
      );
    } else if (config.name === 'server') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
          output: {
            reportDir: './.next/server',
          },
        }),
      );
    }
    return config;
  },
};

export default nextConfig;
      • Options: 插件提供了一些配置项，请参考 Options。

      第二步：执行构建

      执行 build 命令，Rsdoctor 会在本地仓库产物中生成对应的报告数据。

      npm
      yarn
      pnpm
      bun
      deno
      npm run build

      第三步：打开报告

      安装 @rsdoctor/cli 后，package.json 里添加如下 scripts 命令，执行 client:rsd 或者 server:rsd 可打开对应构建器的报告：

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rsdoctor/cli -D
        "scripts": {
    "client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report path
    "server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report path
  }

      📢 Next.js 项目使用注意

      Next.js 在 build 执行结束后会终止终端服务，导致 Rsdoctor 在构建过程中运行的报告页面服务器关闭。为解决此问题，你可以使用 @rsdoctor/cli 重新打开报告页面，无需重新执行构建操作。具体方法见第三步或本地执行 rsdoctor 命令：

      例如 Rsdoctor 的构建产物在 .next/server/chunks/.rsdoctor/manifest.json 路径，则可通过执行下面命令来打开报告页面：

      rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json

      Vue 项目

      在配置文件中初始化 @rsdoctor/webpack-plugin 或 @rsdoctor/rspack-plugin 插件，以下是使用 rsbuild 项目作为示例：

      rsbuild.config.ts
      import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default defineConfig({
  plugins: [pluginVue()],
  performance: {
    buildCache: false,
  },
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
        {
          // 插件选项
        },
      ]);
    },
  },
});
      • Options: 插件提供了一些配置项，请参考 Options。

      第三步：执行构建

      现在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。

      # 开启 Rsdoctor
RSDOCTOR=true npm run build

# 未开启 Rsdoctor
npm run build
      Tip

      Rsdoctor 插件提供了一些配置项，请参考 Options。