[canvas][storybook] Improve Storybook Performance #34757
Conversation
clintandrewhall
added
review
Feature:Dev Tools
Team:Presentation
|
Pinging @elastic/kibana-canvas |
💚 Build Succeeded |
clintandrewhall
changed the title
|
Love the speed improvements! There is already a watcher implemented for Kibana development used here: https://github.com/elastic/kibana/blob/master/src/legacy/server/sass/index.js#L82 It handles a few cases which are not covered, like watching dependencies outside the directory. Think you could generalize the code there for use in both the dev server and plugin build? |
| @@ -6,6 +6,7 @@ | |||
| "license": "Elastic-License", | |||
| "scripts": { | |||
| "kbn": "node ../scripts/kbn", | |||
| "kbn:bootstrap": "rm -rf ../built_assets/canvasStorybookDLL", | |||
There was a problem hiding this comment.
Curious why is this necessary? Shouldn't it get overwritten when it's built?
There was a problem hiding this comment.
We want to force a rebuild of the DLL only if the packages change. We don't want to rebuild the DLL on every startup, just when the dependencies are updated.
| log.verbose(styleSheetPaths); | ||
|
|
||
| if (watch) { | ||
| const debouncedBuild = debounce(async path => { |
There was a problem hiding this comment.
Was there supposed to be a wait defined for the debounce here?
There was a problem hiding this comment.
Hmm... I'm not sure. I saw this methodology elsewhere in Kibana for a watch flag, so I took it as the best approach.
| // Extend the Storybook Webpack config with some customizations | ||
| module.exports = async ({ config }) => { | ||
| // Include timing and other data in the Webpack build stats file. | ||
| config.profile = true; |
There was a problem hiding this comment.
Do you want to commit this? I am not sure what the overhead to profiling is.
There was a problem hiding this comment.
I can take it, sure.
|
Left a couple of comments - In regards to re-using the existing SASS watcher, I am fine punting on this if you feel it's necessary at this time. |
💚 Build Succeeded |
* [WIP] Initial commit * [canvas][storybook] Improving Storybook Performance * Adding docs; fixing bugs * Address feedback; add todo
Summary
Storybook performance has been pretty poor compared to my past experiences, so I started digging into the details. After chatting and filing an issue with the Storybook dev team, there was an issue with
react-docgen-typescriptwhich was fixed just days prior. I've included that change.In addition, with the help of @spalger, I was able to offload almost all of the 10MB+ of code dependencies into a DLL, leaving only a couple of MB of Canvas and Storybook code behind.
All considered, this PR drops the Canvas Storybook build time from 1.5 minutes to 9 seconds.
This PR also includes:
build_sassscript to allow--watch;webpackconfig to ensure Canvas plugin CSS would be loaded and watched properly.Testing
node scripts/storybookand ensure the DLL is built, CSS is watched, and Storybook starts properly.node scripts/storybookagain. Ensure the DLL is not build again.yarn kbn bootstrapand ensure the DLL code is removed.node scripts/storybook_staticand ensure a static build of the Storybook site is produced.node scripts/jestand ensure the Jest tests pass.