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

Posted 2023-02-22

【中文标题】如何分析 Next Js 包的大小和内容

【英文标题】：How to analyze Next Js bundle size and content

【发布时间】：2020-02-13 01:48:29

【问题描述】：

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

有没有办法更深入地了解我的所有捆绑包是由什么组成的？

【参考方案1】：

你可以使用下面的包来分析主包：

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

【讨论】：

哇哦，没想到是官方的 Next JS 包，看到是 webpack 插件，没看懂！

嗯，不幸的是，我按照他们的说明进行操作并收到错误消息：“ANALYZE=true : 术语 'ANALYZE=true' 未被识别为 cmdlet、函数、脚本文件或可运行程序的名称。”

我认为这个错误是关于 Powershell 或 cmd not above package

在使用 Windows 时，您还应该添加“cross-env”，这样您就不会在“ANALYZE=true”上出现错误。 cross-env ANALYZE=true next build

【参考方案2】：

安装@next/bundle-analyzer 和cross-env 作为开发依赖：

yarn add -D @next/bundle-analyzer cross-env

在项目目录的根目录（package.json 旁边）创建一个next.config.js 文件并粘贴以下代码：

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 来分析您的捆绑包大小。