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

Question

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

有没有办法更深入地了解我的所有捆绑包的组成部分？

Answer 1

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文件并将以下行添加到脚本部分：

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

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

Answer 2

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

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