我刚刚升级到Next JS 9.0，当我运行一个构建时，有一个很棒的新特性，它可以显示所有编译过的页面的大小。它们都在20- 30 k左右，除了使用Formik的页面，它们往往至少是这个大小的两倍。主要的问题是app.js文件超过600 k并且是红色的。有没有一种方法可以更深入地了解，在更细粒度的级别上看到我所有的包是由什么组成的？
q0qdq0h21#
1.将@next/bundle-analyzer和cross-env安装为开发依赖项：
@next/bundle-analyzer
cross-env
yarn add -D @next/bundle-analyzer cross-env
1.在项目目录的根目录下创建一个next.config.js文件（package.json旁边），然后粘贴下面的代码：
next.config.js
package.json
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withBundleAnalyzer({ reactStrictMode: true, })
1.转到您的package.json文件，并将以下行添加到 scripts 部分：
"analyze": "cross-env ANALYZE=true next build"
型现在您可以运行yarn analyze或npm run analyze来分析包大小。
yarn analyze
npm run analyze
nfeuvbwi2#
您可以使用以下软件包来分析主捆绑包：https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer
2条答案
按热度按时间q0qdq0h21#
1.将
@next/bundle-analyzer和cross-env安装为开发依赖项：1.在项目目录的根目录下创建一个
next.config.js文件（package.json旁边），然后粘贴下面的代码：1.转到您的
package.json文件，并将以下行添加到 scripts 部分：型
现在您可以运行
yarn analyze或npm run analyze来分析包大小。nfeuvbwi2#
您可以使用以下软件包来分析主捆绑包：
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer