The following asset(s) exceed the recommended size limit

[haruelrovix]

To reproduce, run yarn build-storybook. There are two asset size limit warnings that can impact web performance.

yarn build-storybook
yarn run v1.15.2
$ build-storybook -c .storybook -o .out
info @storybook/react v5.0.6
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (12 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.587e785d3b39ea07a8b4.bundle.js (1.19 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.19 MiB)
WARN       runtime~main.6ac4c33d73ae9704bbb9.bundle.js
WARN       vendors~main.587e785d3b39ea07a8b4.bundle.js
WARN       main.78dd7914b17fa05a2a5e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading custom webpack config (extending mode).
info => Using base config because react-scripts is not installed.
info => Compiling preview..
 10% building 1/1 modules 0 active(node:1679) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
info => Preview built (19 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.233f5970e9ab16c4055e.bundle.js (1.66 MiB)
WARN   iframe.html (385 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.67 MiB)
WARN       runtime~main.233f5970e9ab16c4055e.bundle.js
WARN       vendors~main.233f5970e9ab16c4055e.bundle.js
WARN       main.233f5970e9ab16c4055e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/

Solution: implement Code Splitting.

[cherylcarpenter]

Hi, I'm trying and trying to eliminate the size warnings, and nothing I've tried in the main.js config is working. Can someone show an example in the 'new' and better main.js config?

//.storybook/main.js const path = require('path') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = { stories: [ '../src//*.stories.mdx', '../src/*/.stories.@(js|jsx|ts|tsx)', '../src/components//*.stories.js', ], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss', '@storybook/theming', '@storybook/addon-storysource', '@storybook/addon-notes/register', '@etchteam/storybook-addon-status/register', '@whitespace/storybook-addon-html', ], presets: ['storybook-addon-deps/preset'], webpackFinal: async (config, { configType }) => { // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: [path.resolve(__dirname, './')],
    })

    // analyze webpack bundle size. To enable run storybook with `cross-env analyze=true`
    // not needed, but helps debug the problem :)
    const shouldAnalyze = process.env.analyze === 'true'
    if (shouldAnalyze) {
        config.plugins.push(new BundleAnalyzerPlugin())
    }
    // split into more chunks
    config.optimization = {
        splitChunks: {
            chunks: 'async',
            minSize: 30 * 1024, // 30KB
            maxSize: 64 * 1024, // 1MB
        },
    }
    // Return the altered config
    return config
},

}

[gynekolog]

duplicity https://github.com/storybookjs/storybook/issues/6391