next.js加载很慢_Next.js中的延迟加载模块

next.js加载很慢

Being able to visually analyze a bundle is great because we can optimize our application very easily.

能够以可视方式分析捆绑软件非常有用，因为我们可以非常轻松地优化应用程序。

Say we need to load the Moment library in our blog posts. Run:

假设我们需要在博客文章中加载Moment库。 跑：

npm install moment

to include it in the project.

将其包括在项目中。

Now let’s simulate the fact we need it on two different routes: /blog and /blog/[id].

现在，让我们模拟一个事实，即我们需要在两条不同的路径上使用它： /blog和/blog/[id] 。

We import it in pages/blog/[id].js:

我们将其导入pages/blog/[id].js ：

import moment from 'moment'

...

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {moment().format('dddd D MMMM YYYY')}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

I’m just adding today’s date, as an example.

我仅以今天的日期为例。

This will include Moment.js in the blog post page bundle, as you can see by running npm run analyze:

这将在博客文章页面捆绑包中包含Moment.js，如运行npm run analyze analytics所见：

See that we now have a red entry in /blog/[id], the route that we added Moment.js to!

看到我们现在在/blog/[id]有一个红色条目，这是我们添加Moment.js的路线！

It went from ~1kB to 350kB, quite a big deal. And this is because the Moment.js library itself is 349kB.

它从〜1kB变为350kB，相当大的一笔。 这是因为Moment.js库本身为349kB。

The client bundles visualization now shows us that the bigger bundle is the page one, which before was very little. And 99% of its code is Moment.js.

现在，客户捆绑包可视化向我们显示，更大的捆绑包是第一页，以前很少。 其代码的99％是Moment.js。

Every time we load a blog post we are going to have all this code transferred to the client. Which is not ideal.

每次加载博客文章时，我们都会将所有这些代码传输给客户端。 这是不理想的。

One fix would be to look for a library with a smaller size, as Moment.js is not known for being lightweight (especially out of the box with all the locales included), but let’s assume for the sake of the example that we must use it.

一种解决方法是寻找一个较小的库，因为Moment.js并不以轻量级而著称(尤其是开箱即用，包括所有语言环境)，但让我们假设为例，我们必须使用它。

What we can do instead is separating all the Moment code in a separate bundle.

相反，我们可以做的是将所有Moment代码分离到一个单独的包中 。

How? Instead of importing Moment at the component level, we perform an async import inside getInitialProps, and we calculate the value to send to the component. Remember that we can’t return complex objects inside the getInitialProps() returned object, so we calculate the date inside it:

怎么样？ 与在组件级别导入Moment不同，我们在getInitialProps内部执行异步导入，然后计算要发送到组件的值。 请记住，我们不能在返回的getInitialProps()内部返回复杂的对象，因此我们要计算其中的日期：

import posts from '../../posts.json'

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {props.date}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

Post.getInitialProps = async ({ query }) => {
  const moment = (await import('moment')).default()
  return {
    date: moment.format('dddd D MMMM YYYY'),
    post: posts[query.id]
  }
}

export default Post

See that special call to .default() after await import? It’s needed to reference the default export in a dynamic import (see https://v8.dev/features/dynamic-import)

看到在await import之后对.default()特殊调用吗？ 需要在动态导入中引用默认导出(请参阅https://v8.dev/features/dynamic-import )

Now if we run npm run analyze again, we can see this:

现在，如果再次运行npm run analyze run npm run analyze ，我们可以看到：

Our /blog/[id] bundle is again very small, as Moment has been moved to its own bundle file, loaded separately by the browser.

我们的/blog/[id]包再次很小，因为Moment已移至其自己的包文件，并由浏览器单独加载。

翻译自: https://flaviocopes.com/nextjs-lazy-load-modules/

next.js加载很慢