Skip to content

web: integrate `DllPlugin` in Storybook development build

Warren Gifford requested to merge vb/storybook-build-perf-dll-plugin into main

Created by: valerybugakov

Description

This PR integrates DLL Plugin into our Storybook config. It allows moving most third-party dependencies into a separate pre-built bundle to speed up development build. To try it out, run yarn storybook:dll from the root folder or yarn start:dll from the Storybook workspace.

Closes https://github.com/sourcegraph/sourcegraph/issues/21854.

Approach

The DLL Plugin needs a list of dependencies to put into a pre-build bundle. Ideally, it should happen automatically. Using dependencies from the package.json results in a couple of issues:

  1. A significant portion of dependencies ends up in the main bundle instead of the DLL because of different import types: common.js vs. ESM.
  2. A big part of the dependencies not required for our bundle is included in the DLL bundle because it doesn't know which parts of the modules we actually need and include them.

Luckily, Webpack stats contain a precise list of vendor dependencies required for the Storybook development build. And it's quite easy to get them using the storybook-start --webpack-stats-json command. On the high level, the selected approach looks like this :

  1. Generate Webpack stats from storybook-start.
  2. Generate DLL bundle using vendor dependencies from the Webpack stats.
  3. Use the DLL bundle manifest in the DLL references plugin to start the Storybook development server.

Changes

  • Integrated DLL Plugin into Storybook Webpack config.
  • Added logic to ensure that DLL bundle is available when starting Storybook with DLL plugin enabled.
  • Added DLL Plugin and Environment variables sections to the Storybook README.md.
  • Disabled CaseSensitivePathsPlugin and ProgressPlugin because they contributed a significant amount of time to the development build.

Timings

Approximate timings based on local testing. SCSS and TS columns show recompilation time after the file save.

Command Start Before Start After SCSS Before SCSS After TS Before TS After
yarn storybook 40s 15s 10s 4.5s 1.5s 0.7s
yarn storybook:wildcard 11s 6.7s 3s 2.5s 0.5s 0.01s
yarn storybook:branded 15s 7s - - - -
yarn storybook:web 31s 13s - - - -
yarn storybook:browser 11s 5.2s - - - -
yarn storybook:shared 11.8s 5.8s - - - -

SCSS recompilation is still slow because of the huge global stylesheets. Complete migration to CSS modules will significantly boost the recompilation performance in this area.

Notes

  • Stories which require a Monaco editor are now much more responsive. There's no 1-2s freeze on the story mount 🎉.
  • yarn start:dll command is not the default start command till the implementation of https://github.com/sourcegraph/sourcegraph/issues/22312
  • The initial startup is slower because the DLL bundle must be built before the development server starts. See more info on how it works here.
Screenshot 2021-06-25 at 19 55 59 Screenshot 2021-06-25 at 19 56 24

Bundle analyzer

Bundle analyzer screenshots for curiosity's sake. We still load all the vendor modules from the Before screenshot with DLL Plugin enabled, but we won't process them on the development server.

Before After
image image

Before

Screenshot 2021-06-25 at 16 34 35

After

Screenshot 2021-06-25 at 16 34 07

Merge request reports

Loading