كيفية تحليل حزم تطبيقات Next.js

تعرف على المزيد حول ما هو موجود في حزم تطبيقات Next.js

يوفر لنا التالي طريقة لتحليل حزم التعليمات البرمجية التي تم إنشاؤها.

افتح ملف package.json للتطبيق وفي قسم البرامج النصية أضف هذه الأوامر الثلاثة الجديدة:

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

مثله:

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

ثم قم بتثبيت هاتين الحزمتين:

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

إنشاءnext.config.jsملف في جذر المشروع ، مع هذا المحتوى:

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

module.exports = withBundleAnalyzer({})

الآن قم بتشغيل الأمر

npm run analyze

يجب أن يفتح هذا صفحتين في المتصفح. واحد لحزم العميل والآخر لحزم الخادم:

هذا مفيد بشكل لا يصدق. يمكنك فحص ما يشغل أكبر مساحة في الحزم ، ويمكنك أيضًا استخدام الشريط الجانبي لاستبعاد الحزم ، من أجل تصور أسهل للحزم الأصغر:

تحميل مجانيكتيب Next.js


المزيد من البرامج التعليمية التالية: