Next.js 打包分析工具使用教程

Next.js 打包分析工具使用教程

nextjs-bundle-analysisA github action that provides detailed bundle analysis on PRs for next.js apps项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-bundle-analysis

1. 项目的目录结构及介绍

nextjs-bundle-analysis/
├── github/
│   └── workflows/
│       └── next_bundle_analysis.yml
├── __tests__/
├── .gitignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── compare.js
├── generate.js
├── package-lock.json
├── package.json
├── report.js
├── template.yml
└── utils.js

• github/workflows/next_bundle_analysis.yml: GitHub Actions 的工作流配置文件。
• __tests__/: 测试文件目录。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• compare.js: 比较打包分析结果的脚本。
• generate.js: 生成工作流文件的脚本。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置。
• report.js: 生成打包分析报告的脚本。
• template.yml: 模板文件。
• utils.js: 工具函数脚本。

2. 项目的启动文件介绍

项目的启动文件主要是 generate.js，它用于生成 GitHub Actions 的工作流文件。你可以通过以下命令运行该脚本：

npx -p nextjs-bundle-analysis generate

该命令会在项目根目录下创建 github/workflows 目录，并添加 next_bundle_analysis.yml 文件。

3. 项目的配置文件介绍

package.json

package.json 文件中包含了一些关键的配置项：

• nextBundleAnalysis: 配置打包分析的相关参数，如 buildOutputDirectory 和 budget。

{
  "nextBundleAnalysis": {
    "buildOutputDirectory": "dist",
    "budget": 358400,
    "budgetPercentIncreaseRed": 70
  }
}

next_bundle_analysis.yml

next_bundle_analysis.yml 文件是 GitHub Actions 的工作流配置文件，其中包含了一些关键的配置项：

• buildOutputDirectory: 指定构建输出目录。
• budget: 设置性能预算，单位为字节。
• budgetPercentIncreaseRed: 设置性能预算增加的百分比阈值。

jobs:
  analyze:
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run bundle analysis
        run: node report.js
        env:
          BUILD_OUTPUT_DIRECTORY: dist
          BUDGET: 358400
          BUDGET_PERCENT_INCREASE_RED: 70

通过这些配置文件，你可以自定义打包分析的行为和输出。

nextjs-bundle-analysisA github action that provides detailed bundle analysis on PRs for next.js apps项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-bundle-analysis