如何分析 Next Js bundle 的大小和内容

Question

我刚刚升级到 Next JS 9.0，当我运行构建时，有一个很棒的新功能可以显示所有编译页面的大小。它们都在 20-30k 左右，除了使用 Formik 的页面通常至少是该大小的两倍。主要问题是 app.js 文件超过 600k 并且是红色的。

有没有办法进一步深入了解我的所有捆绑包的构成？

Answer 1

您可以使用以下包来分析主包：

https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer

Answer 2

安装 @next/bundle-analyzer 和 cross-env 作为开发依赖：
```
yarn add -D @next/bundle-analyzer cross-env
```
在项目目录的根目录中创建一个 next.config.js 文件（在 package.json 旁边）并粘贴以下代码：

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
})

转到您的 package.json 文件并将下面的行添加到 scripts 部分：
```
"analyze": "cross-env ANALYZE=true next build"
```

现在您可以运行 yarn analyze 或 npm run analyze 来分析您的包大小。

如何分析 Next Js bundle 的大小和内容

How to analyze Next Js bundle size and content

reactjs

webpack

next.js