本文共 1711 字，大约阅读时间需要 5 分钟。
next. js
Next provides us a way to analyze the code bundles that are generated.
Next为我们提供了一种分析生成的代码束的方法。
Open the package.json file of the app and in the scripts section add those 3 new commands:
打开应用程序的package.json文件，然后在脚本部分中添加这3个新命令：
"analyze": "cross-env ANALYZE=true next build","analyze:server": "cross-env BUNDLE_ANALYZE=server next build","analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
Like this:
像这样：
{ "name": "firstproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start", "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "next": "^9.1.2", "react": "^16.11.0", "react-dom": "^16.11.0" }} then install those 2 packages:
然后安装这两个软件包：
npm install --dev cross-env @next/bundle-analyzer
Create a next.config.js file in the project root, with this content:
在项目根目录中创建一个next.config.js文件，内容如下：
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true'})module.exports = withBundleAnalyzer({}) Now run the command
现在运行命令
npm run analyze
This should open 2 pages in the browser. One for the client bundles, and one for the server bundles:
这将在浏览器中打开2个页面。 一种用于客户端捆绑，另一种用于服务器捆绑：
This is incredibly useful. You can inspect what’s taking the most space in the bundles, and you can also use the sidebar to exclude bundles, for an easier visualization of the smaller ones:
这是非常有用的。 您可以检查束中占用最多空间的空间，还可以使用边栏排除束，以更轻松地可视化较小的束：
翻译自:
next. js
转载地址：http://naqgb.baihongyu.com/