From a8796f4cddf287339850fb3681bad6a756fc8a0d Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 14 Feb 2022 10:31:52 +1100 Subject: [PATCH 1/4] Add lazy compilation option to `builder-webpack5` --- .../src/preview/base-webpack.config.ts | 13 ++++++++----- lib/core-common/src/types.ts | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 17bbe40fb044..5095419611d6 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -1,6 +1,6 @@ import { logger } from '@storybook/node-logger'; import type { Options, CoreConfig, Webpack5BuilderConfig } from '@storybook/core-common'; -import type { Configuration } from 'webpack'; +import { Configuration, experiments } from 'webpack'; export async function createDefaultWebpackConfig( storybookBaseConfig: Configuration, @@ -45,10 +45,12 @@ export async function createDefaultWebpackConfig( const isProd = storybookBaseConfig.mode !== 'development'; const coreOptions = await options.presets.apply('core'); - const cacheConfig = (coreOptions.builder as Webpack5BuilderConfig).options?.fsCache - ? { - cache: { type: 'filesystem' as 'filesystem' }, - } + const builderOptions = (coreOptions.builder as Webpack5BuilderConfig).options; + const cacheConfig = builderOptions?.fsCache + ? { cache: { type: 'filesystem' as 'filesystem' } } + : {}; + const lazyCompilationConfig = builderOptions?.lazyCompilation + ? { lazyCompilation: { entries: false } } : {}; return { ...storybookBaseConfig, @@ -91,5 +93,6 @@ export async function createDefaultWebpackConfig( }, }, ...cacheConfig, + experiments: lazyCompilationConfig, }; } diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index 7a227f2ef1d0..94155d56c345 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -32,6 +32,7 @@ export interface Webpack5BuilderConfig extends BuilderConfigObject { name: 'webpack5'; options?: { fsCache?: boolean; + lazyCompilation?: boolean; }; } From cd4277c0b67af2f770d79e2325c3847a2c44adb4 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 14 Feb 2022 16:23:48 +1100 Subject: [PATCH 2/4] Don't use lazy compilation in production mode --- lib/builder-webpack5/src/preview/base-webpack.config.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 5095419611d6..2a0a081c6c5d 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -49,9 +49,8 @@ export async function createDefaultWebpackConfig( const cacheConfig = builderOptions?.fsCache ? { cache: { type: 'filesystem' as 'filesystem' } } : {}; - const lazyCompilationConfig = builderOptions?.lazyCompilation - ? { lazyCompilation: { entries: false } } - : {}; + const lazyCompilationConfig = + builderOptions?.lazyCompilation && !isProd ? { lazyCompilation: { entries: false } } : {}; return { ...storybookBaseConfig, module: { From 64677960a88da014fa9eb8751f44240ab47be777 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 16 Feb 2022 10:47:46 +1100 Subject: [PATCH 3/4] Drop the `usedExports` optimization in development. As it conflicts with lazy compilation --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 2 +- lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 37692e093434..7e9263e5fda1 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -258,7 +258,7 @@ export default async (options: Options & Record): Promise): Promise Date: Thu, 17 Feb 2022 16:37:04 +1100 Subject: [PATCH 4/4] Address issues in code review --- lib/builder-webpack5/src/preview/base-webpack.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 2a0a081c6c5d..e2a7d2c588d5 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -1,6 +1,6 @@ import { logger } from '@storybook/node-logger'; import type { Options, CoreConfig, Webpack5BuilderConfig } from '@storybook/core-common'; -import { Configuration, experiments } from 'webpack'; +import { Configuration } from 'webpack'; export async function createDefaultWebpackConfig( storybookBaseConfig: Configuration, @@ -92,6 +92,6 @@ export async function createDefaultWebpackConfig( }, }, ...cacheConfig, - experiments: lazyCompilationConfig, + experiments: { ...storybookBaseConfig.experiments, ...lazyCompilationConfig }, }; }