feat: support LazyCompilation (#44)

README.md

@@ -171,7 +171,7 @@ export default {
 
 - [x] Support `webpackInclude` magic comment _(supported in [0.0.7](https://github.com/rspack-contrib/storybook-rsbuild/releases/tag/v0.0.7))_
 - [ ] Support persistent cache
-- [ ] Support lazy compilation
+- [x] Support lazy compilation
 - [ ] Support virtual modules
 - [ ] Support `module.unknownContextCritical`
 - [ ] Support `compilation.dependencyTemplates.set` for react-docgen-typescript 🌟

packages/builder-rsbuild/package.json

@@ -61,7 +61,7 @@
  "prepare": "pnpm run prep --optimized"
  },
  "dependencies": {
- "@rsbuild/plugin-type-check": "1.0.0-alpha.9",
+ "@rsbuild/plugin-type-check": "1.0.1-beta.0",
  "@storybook/addon-docs": "^8.2.1",
  "@storybook/core-webpack": "^8.2.1",
  "browser-assert": "^1.2.1",
@@ -83,7 +83,7 @@
  "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
- "@rsbuild/core": "1.0.0-alpha.9",
+ "@rsbuild/core": "1.0.1-beta.0",
  "@types/express": "^4.17.21",
  "@types/fs-extra": "^11.0.4",
  "@types/node": "^18.0.0",

packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts

@@ -108,24 +108,22 @@ export default async (
  workingDir,
  })
 
- // TODO: not inclined to support fork-ts-checker-webpack-plugin
  const shouldCheckTs =
  typescriptOptions.check && !typescriptOptions.skipCompiler
  const tsCheckOptions = typescriptOptions.checkOptions || {}
 
  // TODO: Rspack doesn't support persistent cache yet
- // const builderOptions = await getBuilderOptions<BuilderOptions>(options)
+ const builderOptions = await getBuilderOptions<BuilderOptions>(options)
  // const cacheConfig = builderOptions.fsCache
  // ? { cache: { type: 'filesystem' as const } }
  // : {}
 
- // TODO: Rspack doesn't support lazyCompilation yet
- // const lazyCompilationConfig =
- // builderOptions.lazyCompilation && !isProd
- // ? {
- // lazyCompilation: { entries: false },
- // }
- // : {}
+ const lazyCompilationConfig =
+ builderOptions.lazyCompilation && !isProd
+ ? {
+ lazyCompilation: { entries: false },
+ }
+ : {}
 
  if (!template) {
  throw new Error(dedent`
@@ -291,6 +289,12 @@ export default async (
  ].filter(Boolean),
  )
 
+ config.experiments ??= {}
+ config.experiments = {
+ ...config.experiments,
+ ...lazyCompilationConfig,
+ }
+
  // TODO: manually call and apply `webpack` from @storybook/addon-docs
  // as it's a built-in logic for Storybook's official webpack and Vite builder.
  // we should remove this once we merge this into Storybook's repository

packages/builder-rsbuild/src/preview/virtual-module-mapping.ts

@@ -11,10 +11,12 @@ import {
  loadPreviewOrConfigFile,
  normalizeStories,
  readTemplate,
+ getBuilderOptions,
 } from 'storybook/internal/common'
 import slash from 'slash'
 import { webpackIncludeRegexp } from '@storybook/core-webpack'
 import { dedent } from 'ts-dedent'
+import { BuilderOptions } from '../types'
 
 export const getVirtualModules = async (options: Options) => {
  const virtualModules: Record<string, string> = {}
@@ -60,10 +62,8 @@ export const getVirtualModules = async (options: Options) => {
  const storiesFilename = 'storybook-stories.js'
  const storiesPath = resolve(join(workingDir, storiesFilename))
 
- // TODO: Rspack doesn't support lazyCompilation yet
- // const builderOptions = await getBuilderOptions<BuilderOptions>(options)
- // const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd
- const needPipelinedImport = !isProd
+ const builderOptions = await getBuilderOptions<BuilderOptions>(options)
+ const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd
  virtualModules[storiesPath] = toImportFn(stories, realPathRelativeToCwd, {
  needPipelinedImport,
  })
@@ -103,8 +103,6 @@ export const getVirtualModules = async (options: Options) => {
 export function toImportFnPart(specifier: NormalizedStoriesSpecifier) {
  const { directory, importPathMatcher } = specifier
 
- // TODO: Rspack doesn't support `webpackInclude` magic comments
- // so the import() here will include all files in the directory
  return dedent`
  async (path) => {
  if (!${importPathMatcher}.exec(path)) {

packages/builder-rsbuild/src/types.ts

@@ -39,6 +39,10 @@ export type BuilderOptions = {
  * Path to rsbuild.config file, relative to CWD.
  */
  rsbuildConfigPath?: string
+ /**
+ * Enable Rspack's lazy compilation (experimental).
+ */
+ lazyCompilation?: boolean
 }
 
 export interface BuilderResult extends BuilderResultBase {

packages/react-rsbuild/package.json

@@ -65,7 +65,7 @@
  "tsconfig-paths": "^4.2.0"
  },
  "devDependencies": {
- "@rsbuild/core": "1.0.0-alpha.9",
+ "@rsbuild/core": "1.0.1-beta.0",
  "@storybook/types": "^8.2.1",
  "@types/resolve": "^1.20.6",
  "add": "^2.0.6",

packages/vue3-rsbuild/package.json

@@ -55,7 +55,7 @@
  "vue-docgen-loader": "^1.5.1"
  },
  "devDependencies": {
- "@rsbuild/core": "1.0.0-alpha.9",
+ "@rsbuild/core": "1.0.1-beta.0",
  "@types/node": "^18.0.0",
  "storybook": "^8.2.1",
  "typescript": "^5.3.2"