[Storybook] Fix Webpack5 lazyCompilation and fsCache in Nx project

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,
  },

REPORT

   Node : 16.13.1
   OS   : darwin x64
   pnpm : 7.13.0

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

[pumano]

@mandarini thank you for details!

[mandarini]

This PR was created on Storybook to address this issue!