Rspack / Rsbuild / Rsdoctor 入門

$ pnpm create rsbuild@latest
 
◆  Create Rsbuild Project
◇  Project name or path
│  hello-rsbuild
◇  Select framework
│  React
◇  Select language
│  TypeScript
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  Add Biome for code linting and formatting, Add ESLint for code linting, Add Prettier for code formatting
◇  Next steps ────╮
│                   │
│  cd hello-rsbuild │
│  pnpm i           │
│  pnpm run dev     │
│                   │
├────────────╯
│
└  Done.

$ pnpm i
$ pnpm run dev

$ pnpm add @rsbuild/plugin-sass -D

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';
 
export default defineConfig({
  plugins: [pluginReact(), pluginSass()],
});

// src/App.module.scss
body {
  margin: 0;
  color: yellow;
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  background-image: linear-gradient(to bottom, #020917, #101725);
}
 
.content {
  display: flex;
  min-height: 100vh;
  line-height: 1.1;
  text-align: center;
  flex-direction: column;
  justify-content: center;
 
  h1 {
    font-size: 3.6rem;
    font-weight: 700;
  }
 
  p {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.5;
  }
}

// src/App.tsx
import STYLES from './App.module.scss';
 
const App = () => {
  return (
    <div className={STYLES.content}>
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
    </div>
  );
};

// rsbuild.config.ts
import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';
 
export default {
  plugins: [pluginCssMinimizer()],
  tools: {
    lightningcssLoader: false,
  },
};

// src/types.ts
interface Author {
  name: string;
  email: string;
  url: string;
}
 
export type { Author };

// src/App.tsx
import STYLES from './App.module.scss';
import type { Author } from './types';
 
const App = () => {
  const author: Author = {
    name: 'codefarmer',
    email: 'codefarmer.tw@gmail.com',
    // url: 'https://codefarmer.tw',
  };
 
  return (
    <div className={STYLES.content}>
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <p>Author: {author.name}</p>
    </div>
  );
};

$ pnpm add @rsbuild/plugin-type-check -D

// rsbuild.config.ts
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 
export default defineConfig({
  plugins: [pluginReact(), pluginSass(), pluginTypeCheck()],
});

start   Compiling...
ready   Compiled in 2.52 s (web)
Type Error in ./src/App.tsx:5:9
TS2741: Property 'url' is missing in type '{ name: string; email: string; }' but required in type 'Author'.
    3 |
    4 | const App = () => {
  > 5 |   const author: Author = {
      |         ^^^^^^
    6 |     name: 'codefarmer',
    7 |     email: 'codefarmer.tw@gmail.com',
    8 |     // url: 'https://codefarmer.tw',

$ pnpm run build

> rsbuild build
 
info    Type checker is enabled. It may take some time.
● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit
 
  File                                    Size        Gzipped
  dist/static/css/index.43c217db.css      0.37 kB     0.26 kB
  dist/index.html                         0.37 kB     0.25 kB
  dist/static/js/index.ccf11837.js        1.6 kB      0.86 kB
  dist/static/js/lib-react.c79a76de.js    140.2 kB    45.0 kB
 
  Total size:  142.5 kB
  Gzipped size:  46.4 kB

// rsbuild.config.ts
const environment = process.env.NODE_ENV;
const isDev = environment === 'development';
 
export default defineConfig({
  performance: {
    bundleAnalyze: {
      // 輸出成靜態 HTML 檔案
      analyzerMode: isDev ? 'disabled' : 'static',
 
      // 輸出報告檔名
      openAnalyzer: !isDev,
 
      // 輸出報告檔名
      reportFilename: `report-${environment}.html`,
    },
  },
});

$ pnpm add @rsdoctor/rspack-plugin -D

{
  "scripts": {
    "dev:rsdoctor": "RSDOCTOR=true rsbuild dev",
  }
}

$ pnpm run dev:rsdoctor
 
... 略 ...
 
info    Rsdoctor analyze server running on: http://localhost:8791/index.html

$ pnpm add moment lodash
$ pnpm add -D @types/lodash

import STYLES from './App.module.scss';
import type { Author } from './types';
import _ from 'lodash';
import moment from 'moment';
 
const App = () => {
  const author: Author = {
    name: 'codefarmer',
    email: 'codefarmer.tw@gmail.com',
    url: 'https://codefarmer.tw',
  };
 
  return (
    <div className={STYLES.content}>
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <p>Author: {author.name}</p>
      <p>lodash/has: {_.has({ a: 1 }, 'a') ? 'true' : 'false'}</p>
      <p>moment: {moment().format('YYYY-MM-DD HH:mm:ss')}</p>
    </div>
  );
};

// rsbuild.config.ts
...
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 
const rsdoctorPlugin = new RsdoctorRspackPlugin({
  supports: {
    generateTileGraph: true,
  }
});
 
export default defineConfig({
  tools: {
    rspack: {
      plugins: [rsdoctorPlugin],
    },
  },
});

// rsbuild.config.ts
export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
    }
  }
});

// rsbuild.config.ts
export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-module',
    },
  },
});

// rsbuild.config.ts
export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-size',
      maxSize: 50000,
      minSize: 10000,
    },
  },
});