快速开始

本文档将介绍如何接入 Rsdoctor 能力。

第一步:安装依赖

Rspack 项目

基于 Rspack 或 Rsbuild 的项目,安装以下依赖:

npm
yarn
pnpm
bun
npm add @rsdoctor/rspack-plugin -D

Webpack 项目

TIP

不支持 Webpack 4 项目。

基于 Webpack 的项目,安装以下依赖:

npm
yarn
pnpm
bun
npm add @rsdoctor/webpack-plugin -D

第二步:注册插件

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

Rspack 项目

rspack.config.jsplugins 中初始化 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.config.tstools.rspack 中初始化 RsdoctorWebpackPlugin 插件,参考:

rsbuild.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

Webpack 项目

webpack.config.jsplugins 中初始化 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.tstools.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 项目

next.config.jsWebpack Config 中初始化 RsdoctorWebpackPlugin 插件。

next.config.mjs
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  // ...
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new RsdoctorWebpackPlugin({
        // 插件选项
      }),
    );
    return config;
  },
};
  • Options: 插件提供了一些配置项,请参考 Options

📢 Next.js 项目使用注意

  1. Next.js 项目报告页面问题

详情查看:FAQ

  1. Next.js 中不支持对 rules 进行重写的 Loader 分析

详情查看:FAQ

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

📢 Vue 项目使用注意

由于目前不支持对 vue-loader 进行分析,对于 Vue 项目,默认情况下禁用了 loader 分析。但是,仍然可以进行插件和构建产物的分析。


第三步:执行构建

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

# 开启 Rsdoctor
RSDOCTOR=true npm run build

# 未开启 Rsdoctor
npm run build
TIP

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