背景

最近在一家小厂实习打杂，leader觉得以storybook为框架的组件库开发文档构建太慢了，让我优化一下，最好能够按需加载。

文件目录

fe-packages
├── README.md
├── commitlint.config.js
├── demo
├── f2elint.config.js
├── node_modules
├── package.json
├── package.tsconfig.json
├── packages
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── scripts
├── storybook-static
├── templates
└── tsconfig.json

.storybook
├── main.js
├── manager.js
├── preview.js
└── theme.js

版本

storybook6.5

官方文档

storybook官方文档

具体操作

总之就是一顿操作猛如虎，一看代码加三行。。

按需加载

来自于官方文档👇

On-demand story loading

As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the storyStoreV7 feature flag to false in your configuration as follows:
// .storybook/main.js

module.exports = {
 stories: [],
 addons: ['@storybook/addon-essentials'],
 features: {
   storyStoreV7: true,
 },
};

即在features中加入storyStoreV7: true即可，总觉得这个键名命名很随意。加上这个之后，可以看到很明显的优化，我司组件库大概是从30000ms -> 3000ms

按需构建

来自于官方文档👇

With a custom implementation

You can also adjust your Storybook configuration and implement your custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
// .storybook/main.js

function findStories() {
 // your custom logic returns a list of files
}

module.exports = {
 stories: async (list) => [...list, ...findStories()],
 addons: ['@storybook/addon-essentials'],
};

构建单个包

在.storybook/main.js中加入下面的代码

const project = process.argv[4] ?? '**';

module.exports = {
  stories: [
    `../packages/${project}/src/*.stories.@(js|jsx|ts|tsx|vue)`,
    `../packages/${project}/src/*.stories.mdx`,
  ],
  ...
}

在构建时, 输入pnpm run storybook pkname即可构建指定包

构建多个包

在.storybook/main.js中加入下面的代码

async function findStories() {
  // your custom logic returns a list of files
  return process.argv[4]
    ? process.argv.slice(4).map((item) => `../packages/${item}/src`)
    : [`../packages/**/src/*.stories.@(js|jsx|ts|tsx|vue)`, `../packages/**/src/*.stories.mdx`];
}

module.exports = {
  stories: async () => [
    // 👇 Add your found stories to the existing list of story files
    ...(await findStories()),
  ],
  ...
}

在构建时, 输入pnpm run storybook pkname pkname ...即可构建指定包

完成后，构建速度优化为3000ms -> 300-500ms

后记

其实很简单,我效率好低下→_→

希望能帮助到搜索到这篇文章的你^^

storybook按需加载指定包

背景