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

Question

我刚刚升级到Next JS 9.0，当我运行构建时，有一个很棒的新功能，可以显示所有编译页面的大小。它们都在 20-30k 左右，除了使用 Formik 的页面，这些页面的大小往往至少是这个大小的两倍。主要问题是应用程序.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