[STORYBOOK] storyStoreV7, Webpack5 lazyCompilation and fsCache options don't work

Current Behavior

When i configure storybook webpack 5 with code splitting, lazy compilation and filesystem caching, storybook start without considering no one of that configuraton options:

// .storybook/main.js

module.exports = { 
  features: { 
     storyStoreV7: true 
  },
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
        fsCache: true,
      },
    },
  },
};

Expected Behavior

When I set storyStoreV7: true, lazyCompilation: true and fsCache: true, storybook start with code splitting, lazy Compilation and file system cache.

Steps to Reproduce

Set storybook main file as below

// .storybook/main.js

module.exports = { 
  features: { 
     storyStoreV7: true 
  },
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
        fsCache: true,
      },
    },
  },
};

Official storybook doc: https://storybook.js.org/docs/react/builders/webpack

Failure Logs

None! Storybook start without considering the provided webpack 5 configuration described above.

Environment

Nx v14.6.1 Storybook 6.5.4

[ild0tt0re]

Hey @mandarini I found what is missing for lazyCompilation and fsCache to work 🎉

🚀 We noticed a huge performance improvement -> more than 10X ⚡ from ~90s to ~7s in dev mode:

$ nx storybook $myProject

How Storybook work?

Setting the following builder …

// .storybook/main.js

module.exports = {
  core: {
      builder: {
        name: 'builder-webpack5',
        options: {
          lazyCompilation: true,
          fsCache: true,
        },
      },
    },
  ...

… the base webpack configuration should be composed with the following options as a fresh install of Storybook without Nx

const webpackBaseConfig = {

    // base config for `lazyCompilation` and `fsCache` to work
    optimization: {
        splitChunks: { chunks: 'all' },
        runtimeChunk: true,
        sideEffects: true,
        usedExports: false,
        moduleIds: 'named',
        minimizer: [],
    },
    cache: { type: 'filesystem' },
    experiments: { lazyCompilation: { entries: false } },

    // other base config....

}

What needs to do Nx side?

Considering lazyCompilation and fsCache builder options as did by Storybook here: https://github.com/storybookjs/storybook/blob/7035ea7389393da041985ebc491ee58dedb50d06/code/lib/builder-webpack5/src/preview/base-webpack.config.ts#L53-L55

My final configuration for maximizing the performance (SWC + lazyCompilation + devtool = false)

// .storybook/main.js

module.exports = {
  webpackFinal: async (config, { configType }) => {
      
      if (configType === 'DEVELOPMENT') {
        // not needed for `lazyCompilation` but you get fastest performance in rebuild with webpack
        config.devtool = false

        config = {
          ...config,
          optimization: {
            splitChunks: { chunks: 'all' },
            runtimeChunk: true,
            sideEffects: true,
            usedExports: false,
            moduleIds: 'named',
            minimizer: [],
          },
          cache: { type: 'filesystem' },
          experiments: { lazyCompilation: { entries: false } },
        }
      }

      return config
    },

  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: false,
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [
                [
                  // ONLY if you use styled-components lib
                  '@swc/plugin-styled-components',
                  {
                    displayName: true,
                    ssr: true,
                  },
                ],
              ],
            },
          },
        },
        swcMinifyOptions: {},
      },
    },

  features: {
    babelModeV7: true,
   // code splitting
    storyStoreV7: true,
  },

[ild0tt0re]

Repro: https://github.com/ild0tt0re/storybook-import-type/tree/storybook-lazy-compilation

I got the same error in the provided repro above.

Changes based on your feature branch: https://github.com/mandarini/storybook-import-type/pull/1/files

To test it you can run yarn install and

$ nx storybook ui

My Nx report:

   Node : 16.13.1
   OS   : darwin x64
   pnpm : 7.12.2

   nx : 14.7.17
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.7.17
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.7.17
   @nrwl/eslint-plugin-nx : 14.7.17
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 14.7.17
   @nrwl/js : 14.7.17
   @nrwl/linter : 14.7.17
   @nrwl/nest : Not Found
   @nrwl/next : 14.7.17
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.7.17
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.7.17
   @nrwl/web : 14.7.17
   @nrwl/workspace : 14.7.17
   typescript : 4.7.2
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
   	 @jscutlery/semver: 2.26.0
   	 ngx-deploy-npm: 4.1.0