Storybook: How to solve the dll file?

[yehuozhili]

Describe the bug

If i use the CLI option --no-dll , it will generate a chunk which about 2000k size .
if i want to publish static website , ever user must pull the 700k(2000k before gzip)chunk first , it has greate impact on the user experience .

the strange thing is , i use main.js to merge the webpack config but it doesnt work on dll file . it seems that the generation of dll chunk is independent of user webpackconfig. because the dll file is generated before the user print config in main.js.

i found that the loading speed of the sample website on the storybook official website is also very slow , React Native Web will let user to pull 700k chunk first and React Dates must pull 500k.

i want to know what to do can minimize dll chunk?

To Reproduce
Steps to reproduce the behavior:

1. Go to React Native Web
2. Open the developer debugging tool
3. see the vendors~main.defe116d874f44993a10.bundle.js

Expected behavior
dll chunk size less than 300k

[shilman]

cc @ndelangen

[ndelangen]

if you use --no-dll the dll file should not be loaded by the browser, are you saying it is?

[yehuozhili]

@ndelangen
the dll file content is about storybook ui ,it should be loaded by the browser , but it too large and can not configure .
if user in 3g network or when the network speed is not good , user will see the white screen for a long time .
it takes me two minutes to use my network to visit the React Native for Web website to pull the first chunk(700k) and i look the blank screen for two minutes.
it will be better at the second visit because the browser cache.
i want to know how to configure dll file and how to minimize or split dll file ?

[ndelangen]

The Dll can currently only be enabled and disabled.

Enabling it, means a slower storybook start/build. Overall output size should be the same, but without DLL webpack could split the size over multiple chunks, I believe.

I'd love to find ways to minimize the footprint of storybook including the DLL size.

Would you be able to help?

[yehuozhili]

@ndelangen
maybe i have some misunderstanding on webpack config, i think you mean is if dll disabled, webpack can split dll to multiple chunks?
what puzzles me is that the biggest chunk(generated by disabled dll) has been generated before i console log in main.js, and webpack-bundle-analyzer can not catch the biggest chunk(because the biggest chunk has already been generated before use user webpack configure)

[ndelangen]

We build 2 apps, thus run webpack twice (in parallel).

Normally users need only worry about customizing the webpack config for THEIR code (the preview)

But it IS possible to customize the webpack config for OUR code (the manager) as well. It' just generally not recommended.

There's some docs on this:
https://storybook.js.org/docs/presets/writing-presets/#webpack

you can customize the both configs with:

modul.exports = {
  finalWebpack: (config) => config, // for preview changes
  managerWebpack: (config) => config, // for manager changes
}

I hope this helps you.

[yehuozhili]

@ndelangen
Thank you !
That's i want.
My English is not very good , so there is a deviation in my understanding of the document