如果您正在使用nextjs使用@storyblokcom，并且遵循the official guides from Storyblok，则知道启动项目的通常方法是：
- 使用
create-next-app创建NextJS项目 - 安装必要的依赖项与Storyblok集成。
- 创建您的Storyblok组件。
- 通过将以下代码添加到您的
_app.jsx来初始化nextjs -storyblok连接。
...
import { storyblokInit, apiPlugin } from "@storyblok/react";
import Feature from "../components/Feature";
import Grid from "../components/Grid";
import Page from "../components/Page";
import Teaser from "../components/Teaser";
const components = {
feature: Feature,
grid: Grid,
teaser: Teaser,
page: Page,
};
storyblokInit({
accessToken: "your-preview-token",
use: [apiPlugin],
components,
});
...
问题：
您将所有组件加载到每个页面上！
这是因为_app.jsx的内容在每个页面加载上都执行。因此
由于官方指南建议在_app.jsx文件中导入所有组件的所有，因此这意味着 all 您的组件代码都会在每个页面加载上加载。即使该页面完全静态并且根本不使用任何StoryBlok组件！
我最终在官方的@storyblok/react github repo上创建了a Github issue和implementing this feature via a PR。我对贡献有些犹豫，但是@storyblok/react回购的好人非常友善，接受了它，所以非常感谢他们！
如何仅加载所需的东西
而不是将所有组件加载到_app.jsx文件中，而只需初始化连接，然后删除您拥有的任何组件导入，因此看起来更像是这样：
...
import { storyblokInit, apiPlugin } from "@storyblok/react";
storyblokInit({
accessToken: "your-preview-token",
use: [apiPlugin],
});
...
然后，在您的页面组件中，使用新的setComponents方法仅设置该页面上所需的组件。因此看起来像这样：
...
import { getStoryblokApi, StoryblokComponent, setComponents } from "@storyblok/react"
import Feature from "../components/Feature";
import Grid from "../components/Grid";
import Page from "../components/Page";
import Teaser from "../components/Teaser";
export default function Home(props) {
const story = props.story
setComponents({
feature: Feature,
grid: Grid,
teaser: Teaser,
page: Page,
})
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<header>
<h1>
{ story ? story.name : 'My Site' }
</h1>
</header>
<StoryblokComponent blok={story.content} />
</div>
)
}
...
就是这样！
现在，当NextJS构建您的页面时，它将仅包括直接在该页面上导入的组件并降低您的JS捆绑尺寸，从而加快页面加载时间。