Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

Storybook Vite 2x slower than the default

See original GitHub issue

After migrating from the default builder to the vite builder, it now takes 4sec to refresh the page after updating a class in a component, when it took 2sec before.

The startup still mentions webpack so Iโ€™m a bit confused, I donโ€™t know if itโ€™s supposed to do that. Also after updating the component, a simple class replacement, 787 requests are made. About half of them are cached but since the browsers have a limit of 9 concurrent requests, it still takes time to process them. Maybe it is a HMR issue.

Is it normal to have mentions of webpack during startup ? It is normal to have so many requests after a component update ? What can I do to investigate ?

Storybook startup 
info @storybook/react v6.3.1
info 
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.

info => Ignoring cached manager due to change in manager config
โ„น ๏ฝขwdm๏ฝฃ: wait until bundle finished: 
โ„น ๏ฝขwdm๏ฝฃ: wait until bundle finished: /__vite_ping
Pre-bundling dependencies:
  tslib
  connected-react-router
  react
  react-dom
  react-intl
  (...and 114 more)
(this will be run only when your dependencies or config have changed)
โ„น ๏ฝขwdm๏ฝฃ: Hash: 86474cd905d0a95ab1be
Version: webpack 4.46.0
Time: 5873ms
Built at: 06/30/2021 5:40:41 PM
                         Asset      Size        Chunks                    Chunk Names
           0.manager.bundle.js   113 KiB             0  [emitted]         
           1.manager.bundle.js   197 KiB             1  [emitted]         
           2.manager.bundle.js  67.6 KiB             2  [emitted]         
           3.manager.bundle.js   373 KiB             3  [emitted]  [big]  
           4.manager.bundle.js  15.9 KiB             4  [emitted]         
           5.manager.bundle.js  1.36 KiB             5  [emitted]         
                    index.html  3.37 KiB                [emitted]         
        main.manager.bundle.js  4.88 KiB          main  [emitted]         main
runtime~main.manager.bundle.js  8.95 KiB  runtime~main  [emitted]         runtime~main
vendors~main.manager.bundle.js  4.61 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-actions/dist/esm/register.js ./node_modules/@storybook/addon-docs/dist/esm/register.js ./node_modules/@storybook/addon-controls/dist/esm/register.js ./node_modules/@storybook/addon-backgrounds/dist/esm/register.js ./node_modules/@storybook/addon-viewport/dist/esm/register.js ./node_modules/@storybook/addon-toolbars/dist/esm/register.js ./node_modules/@storybook/addon-measure/dist/esm/preset/manager.js ./node_modules/storybook-addon-outline/dist/esm/preset/register.js ./node_modules/storybook-addon-intl/register.js 148 bytes {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/constants.js] 239 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/register.js] ./node_modules/@storybook/addon-actions/dist/esm/register.js + 4 modules 96 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/register.js 3.36 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/containers/ActionLogger/index.js 7.13 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/index.js 2.94 KiB [built]
    | ./node_modules/react-inspector/dist/es/react-inspector.js 81.7 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/style.js 793 bytes [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/register.js] ./node_modules/@storybook/addon-backgrounds/dist/esm/register.js + 5 modules 14.7 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/register.js 826 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/constants.js 185 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/BackgroundSelector.js 6.46 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/GridSelector.js 3.44 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/components/ColorIcon.js 399 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/helpers/index.js 3.31 KiB [built]
[./node_modules/@storybook/addon-controls/dist/esm/register.js] ./node_modules/@storybook/addon-controls/dist/esm/register.js + 20 modules 103 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/register.js 1.18 KiB [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/constants.js 74 bytes [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js 4.35 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/addon-panel/addon-panel.js 908 bytes [built]
    | ./node_modules/@storybook/components/dist/esm/typography/DocumentFormatting.js 13.9 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/typography/shared.js 1.42 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/blocks/Source.js 3.21 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/blocks/ArgsTable/NoControlsWarning.js 862 bytes [built]
    | ./node_modules/markdown-to-jsx/dist/index.module.js 14.6 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/controls/options/Options.js 3.02 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/blocks/EmptyBlock.js 1.22 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/blocks/ArgsTable/ArgsTable.js 16.5 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/controls/options/Checkbox.js 5.09 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/controls/options/Radio.js 2.01 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/controls/options/Select.js 4.73 KiB [built]
    |     + 6 hidden modules
[./node_modules/@storybook/addon-docs/dist/esm/register.js] ./node_modules/@storybook/addon-docs/dist/esm/register.js + 1 modules 1020 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/register.js 625 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-measure/dist/esm/preset/manager.js] ./node_modules/@storybook/addon-measure/dist/esm/preset/manager.js + 3 modules 4.1 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/preset/manager.js 425 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/constants.js 249 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/Tool.js 2.38 KiB [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/useHotKey.js 1.03 KiB [built]
[./node_modules/@storybook/addon-toolbars/dist/esm/register.js] ./node_modules/@storybook/addon-toolbars/dist/esm/register.js + 10 modules 18 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/register.js 467 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarManager.js 1.39 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuList.js 4.73 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/normalize-toolbar-arg-type.js 1.05 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuButton.js 625 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/hoc/withKeyboardCycle.js 5.03 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/get-selected-icon.js 372 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuListItem.js 979 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/create-cycle-value-array.js 524 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js 2.69 KiB [built]
[./node_modules/@storybook/addon-viewport/dist/esm/register.js] ./node_modules/@storybook/addon-viewport/dist/esm/register.js + 4 modules 18.7 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/register.js 514 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 10.9 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/shortcuts.js 3.81 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/addons/dist/esm/public_api.js] ./node_modules/@storybook/addons/dist/esm/public_api.js + 1 modules 766 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addons/dist/esm/public_api.js 515 bytes [built]
    | ./node_modules/@storybook/addons/dist/esm/storybook-channel-mock.js 226 bytes [built]
[./node_modules/@storybook/api/dist/esm/index.js] ./node_modules/@storybook/api/dist/esm/index.js + 21 modules 132 KiB {vendors~main} [built]
    | ./node_modules/@storybook/api/dist/esm/index.js 18.3 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/context.js 249 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/store.js 5.5 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/lib/merge.js 795 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/initial-state.js 401 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/lib/stories.js 8.49 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/provider.js 281 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/modules/addons.js 5.95 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/channel.js 1.19 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/notifications.js 2.76 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/settings.js 3.66 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/release-notes.js 3.5 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/refs.js 15.6 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/stories.js 17.4 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/layout.js 7.47 KiB [built]
    |     + 7 hidden modules
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 78 modules 552 KiB {vendors~main} [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
    | ./node_modules/@storybook/ui/dist/esm/index.js 2.96 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 4.45 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
    | ./node_modules/react-helmet-async/lib/index.module.js 12 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/spaced/Spaced.js 3.26 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/brand/StorybookLogo.js 4.9 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/Badge/Badge.js 1.63 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/Loader/Loader.js 8.86 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/bar/bar.js 4.96 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/placeholder/placeholder.js 3.81 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/tabs/tabs.js 10.4 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/Zoom/Zoom.js 458 bytes [built]
    | ./node_modules/@storybook/components/dist/esm/brand/StorybookIcon.js 2.87 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/typography/DocumentWrapper.js 6.69 KiB [built]
    |     + 64 hidden modules
[./node_modules/storybook-addon-intl/register.js] 139 bytes {vendors~main} [built]
[./node_modules/storybook-addon-outline/dist/esm/preset/register.js] ./node_modules/storybook-addon-outline/dist/esm/preset/register.js + 2 modules 3.16 KiB {vendors~main} [built]
    | ./node_modules/storybook-addon-outline/dist/esm/preset/register.js 539 bytes [built]
    | ./node_modules/storybook-addon-outline/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/storybook-addon-outline/dist/esm/OutlineSelector.js 2.53 KiB [built]
    + 998 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.31 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.99 KiB {HtmlWebpackPlugin_0} [built]
โ„น ๏ฝขwdm๏ฝฃ: Compiled successfully.
โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚                                                   โ”‚
โ”‚   Storybook 6.3.1 started                         โ”‚
โ”‚   6.52 s for manager and 9.64 s for preview       โ”‚
โ”‚                                                   โ”‚
โ”‚    Local:            http://localhost:6006/       โ”‚
โ”‚    On your network:  http://192.168.1.40:6006/    โ”‚
โ”‚                                                   โ”‚
โ”‚   A new version (6.3.2) is available!             โ”‚
โ”‚                                                   โ”‚
โ”‚   Upgrade now: npx sb@latest upgrade              โ”‚
โ”‚                                                   โ”‚
โ”‚   Read full changelog: https://git.io/fhFYe       โ”‚
โ”‚                                                   โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
5:43:17 PM [vite] new dependencies found: storybook-addon-intl, updating...
5:43:19 PM [vite] โœจ dependencies updated, reloading page...
5:43:31 PM [vite] new dependencies found: @storybook/addon-actions, updating...
5:43:33 PM [vite] โœจ dependencies updated, reloading page...
5:44:01 PM [vite] page reload src/components/modules/explorer/TableFilters.tsx
package.json summary 
{
    "main": "src/index.tsx",
    "packageManager": "yarn@2.4.1",
    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "vite": "^2.3.7",
        "vite-plugin-svgr": "^0.3.0",
        "vite-tsconfig-paths": "^3.3.13",
    },
    "scripts": {
        "storybook": "start-storybook -p 6006",
    },
    "devDependencies": {
        "@mdx-js/react": "^1.6.22",
        "@storybook/addon-actions": "6.3.1",
        "@storybook/addon-docs": "6.3.1",
        "@storybook/addon-essentials": "6.3.1",
        "@storybook/addon-links": "6.3.1",
        "@storybook/addon-postcss": "^2.0.0",
        "@storybook/react": "6.3.1",
        "@vitejs/plugin-react-refresh": "^1.3.1",
        "storybook-addon-intl": "^2.4.1",
        "storybook-builder-vite": "^0.0.10",
        "typescript": "4.1.3",
    }
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
JesusTheHuncommented, Jul 1, 2021

I just tested with a FC component, the updates happens in a snap. Iโ€™ll see with Vite. Also Iโ€™m in the middle of a refacto so it might be an opportunity to move towards hooks.

0reactions
eirslettcommented, Jul 2, 2021

Iโ€™ll close this issue, feel free to reopen if thereโ€™s something that can be fixed in this builder.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook Performance: Vite vs Webpack - JS.ORG
Currently, Webpack is Storybook's default builder. ... Vite is a next-gen build tool that aims to provide a faster and leaner developmentย ...
Read more >
Storybook Performance: Vite vs Webpack : r/javascript - Reddit
Prod builds with Vite are slower cause it performs more aggressive tree shaking. But it generates smaller bundles.
Read more >
Change clip speed in iMovie on Mac - Apple Support
In iMovie on your Mac, slow down or speed up clips. ... In addition, iMovie can automatically adjust the frame rate of any...
Read more >
Why we switched from Webpack to Vite - Hacker News
Exactly: 99% of the time, "webpack is slow" is just code for "I have Babel in my toolchain" and forgetting to set ts-loader...
Read more >
EDi - River Thames Conditions - Environment Agency - GOV.UK
Narasimha stuti sanskrit, Multi homed server default gateway, Sandra desernot, ... Accident a281 rudgwick, Resumen sub 17 mexico vs argentina 2013!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Rollup failed to resolve import "{}" from "node_modules/@storybook/client-logger/dist/esm/index.js"

Next page

Storybook pulls my tests