asset size limit: The following asset(s) exceed the recommended size limit (244 KiB) in storybook build

Viewed 809

I am tried to solve this, it shows when I command npm run build-storybook

Error:

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.867acf8415a0b04d833b.bundle.js (274 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 (277 KiB)
WARN       runtime~main.867acf8415a0b04d833b.bundle.js
WARN       vendors~main.867acf8415a0b04d833b.bundle.js
WARN       main.867acf8415a0b04d833b.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/

My config file is:

import { configure,addDecorator,addParameters   } from '@storybook/react';
import {withKnobs } from "@storybook/addon-knobs";
import { withHTML } from '@whitespace/storybook-addon-html/react';
import { withInfo } from '@storybook/addon-info';
import crfTheme from './crfTheme';
// golbal scss  
import "../styles/juni/storybook.scss";


//--------- addons--------
addDecorator(withKnobs({
  escapeHTML: false,
}));
addDecorator(withHTML);
addDecorator(withInfo); 


// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
    require('./welcomeStory');
    req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

and my min.js file is:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {

  performance: {
    hints: false,
  },
  
  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?url=false', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  }
};

can anyone any idea to solve it?

Thanks

0 Answers
Related