了解有關Next.js應用程序捆綁中的內容的更多信息
Next為我們提供了一種分析生成的代碼包的方法。
打開應用程序的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"
像這樣:
{
"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
這將在瀏覽器中打開2個頁面。一種用於客戶端捆綁,另一種用於服務器捆綁:
這是非常有用的。您可以檢查束中佔用最多空間的空間,還可以使用邊欄排除束,以更輕鬆地可視化較小的束:
免費下載我的Next.js手冊
接下來的更多教程:
- Next.js入門
- Next.js vs Gatsby vs create-react-app
- 如何安裝Next.js
- 使用鏈接在Next.js中鏈接兩個頁面
- 路由器中Next.js中的動態內容
- 使用getInitialProps將數據饋送到Next.js組件
- 使用CSS樣式化Next.js組件
- 在Next.js中預取內容
- 使用路由器檢測Next.js中的活動鏈接
- 查看源代碼以確認SSR在Next.js中正常工作
- Next.js:使用自定義標籤填充head標籤
- 立即部署Next.js應用程序
- Next.js:僅在Next.js的服務器端或客戶端運行代碼
- 在生產中部署Next.js應用
- 如何分析Next.js應用程序捆綁包
- Next.js中的延遲加載模塊
- 向您的Next.js應用添加包裝器組件
- Next.js添加到您的應用程序中的圖標
- Next.js應用程序捆綁包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js應用中在服務器端獲取Cookie
- 如何更改Next.js應用程序端口