Discussion on: We're the core maintainers of Storybook, Ask Us Anything!

[Folashade O]

I've downloaded a few open source storybook repos from other companies, and worked on storybook repo at mid-size companies. They seem to all have the same problem of keeping start-up and HMR (Hot Module Reloading) time down. Any work planning to increase the performance of storybook applications?

It seems like scale is an avenue where storybook has more opportunity to grow! Especially if you're interested in loading components from multiple frameworks into one Storybook application.

[Nick Taylor]

That could be an issue related to how big the project is, and that is probably more webpack related.

We have large TypeScript/React projects and ended up using Happy Pack and fork-ts-checker-webpack-plugin to speed up things.

I was able to bring an initial build time down from 2 minutes to 30 seconds with subsequent super fast HMR thanks to these great projects.

So thanks to custom webpack configs in Storybook, we were able to apply these plugins to Storybook as well.

[Norbert de Langen]

Wow, that looks cool! Could we use that by default do you think?

[Nick Taylor]

You probably could. It's pretty minimal webpack changes. You include a plugin/loader and you're good to go. Here's the current TypeScript/React project I'm working on's webpack config for Storybook

/**
 * This extends the default webpack configuration used in storybook.
 */
const { resolve } = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HappyPack = require('happypack');

module.exports = {
  devtool: 'cheap-module-source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      types: resolve(__dirname, '../types'),
      helpers: resolve(__dirname, '../src', 'helpers'),
      services: resolve(__dirname, '../src', 'services'),
      reducers: resolve(__dirname, '../src', 'reducers'),
      actions: resolve(__dirname, '../src', 'actions'),
      components: resolve(__dirname, '../src', 'components'),
      routes: resolve(__dirname, '../src', 'routes'),
      utilities: resolve(__dirname, '../src', 'utilities'),
      assets: resolve(__dirname, '../src', 'assets'),
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'happypack/loader?id=ts',
      },
    ],
  },
  plugins: [
    new HappyPack({
      id: 'ts',
      threads: 2,
      loaders: [
        {
          path: 'ts-loader',
          query: { happyPackMode: true },
        },
      ],
    }),
    // Handles type  checking on another thread.
    new ForkTsCheckerWebpackPlugin({
      async: false,
      tslint: true,
      checkSyntacticErrors: true,
    }),
  ],
};

[Norbert de Langen]

Yes Yes, absolutely.

Performance enhancement is #3 on the list of my priorities:

1. Support other maintainers, onboard new maintainers, grow the community, support users
2. Documentation view
3. Performance

During the documentation view epic, I'll make storybook a lot more extensible as well!