Cách phân tích các gói ứng dụng Next.js

Tìm hiểu thêm về những gì trong gói ứng dụng Next.js của bạn

Tiếp theo cung cấp cho chúng tôi một cách để phân tích các gói mã được tạo.

Mở tệp package.json của ứng dụng và trong phần tập lệnh, hãy thêm 3 lệnh mới đó:

"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"

Như thế này:

{
  "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"
  }
}

sau đó cài đặt 2 gói đó:

npm install --dev cross-env @next/bundle-analyzer

Tạo mộtnext.config.jstệp trong thư mục gốc của dự án, với nội dung sau:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({})

Bây giờ chạy lệnh

npm run analyze

Thao tác này sẽ mở 2 trang trong trình duyệt. Một cho gói máy khách và một cho gói máy chủ:

Điều này vô cùng hữu ích. Bạn có thể kiểm tra những gì chiếm nhiều không gian nhất trong các gói và bạn cũng có thể sử dụng thanh bên để loại trừ các gói, để dễ hình dung hơn về các gói nhỏ hơn:

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: