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

Question

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

是否可以进一步深入了解我的所有捆绑包是什么？

Answer 1

您可以使用以下软件包来分析主捆绑包 https://github.com/zeit/next.js/tree/canary/packages/next-bundle-analyzer

Answer 2

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

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

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

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

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

3. 转到您的 package.json 文件并将以下行添加到 scripts 部分：

   "analyze": "cross-env ANALYZE=true next build"
   

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