文章目录原因 1Next.js 默认包含 SSR / RSC / Edge Runtime 等功能原因 2Next.js 每个路由都有 Server Client bundling原因 3Next.js 默认使用 React体积比 Vue 大原因 4Next.js 的构建产物包含大量元数据和中间产物原因 5你看到的体积并不是浏览器实际加载的大小那为什么 Vue / React 看起来小很多如何判断真实的页面体积如何减少 Next.js 客户端包体积1. 减少 client component改为 server component2. 使用 dynamic() 分包加载3. 去掉运行时 polyfills4. 打开 SWC 压缩5. 依赖优化Next.js打包体积“看起来”比 Vue/React 更大这是非常常见的现象但这并不是因为 Next.js 本身臃肿而是由于SSR / 路由机制 / 打包模式 / 产物结构等带来的客观差异。原因 1Next.js 默认包含 SSR / RSC / Edge Runtime 等功能VueVite、Create React App、React Vite 本质上都是纯前端 SPA。但 Next.js 是全栈框架打包产物包含更多内容内容Vue/React SPANext.js客户端 JS✔️✔️SSR 渲染代码❌✔️服务端路由代码❌✔️API Routes / Server Actions❌✔️Edge Runtime / Node runtime❌✔️两套 bundle客户端服务端❌✔️➡️你看到的.next目录体积大是因为它包含了客户端 服务端 两份产物。Vue/React 只生成客户端 bundle所以自然更小。原因 2Next.js 每个路由都有 Server Client bundling例如/dashboard这个页面Next.js 会生成/dashboard—— SSR 渲染代码Server 端/dashboard.client.js—— 客户端 hydration 脚本shared chunks以及 RSC 文件如你用到 App Router而 Vue/React SPA 只有/assets/dashboard.xxx.js纯客户端➡️多了一倍甚至数倍的文件数量。原因 3Next.js 默认使用 React体积比 Vue 大React 本身体积大约 42kb gzip比 Vue大约 20kb gzip更大。分别看 SPA 打包Vue生产包非常小React会大一些Next.js因为 React SSR Routing Runtime → 自然再大一些原因 4Next.js 的构建产物包含大量元数据和中间产物.next目录里包含serverserver/chunksserver/appApp Routerserver/pages如果使用clientclient/chunksmiddlewareimg optimizer fileswebpack cacheserver build manifest如下Vue 和 Vite React的dist/目录基本只包含jscssassets➡️ Next.js 多产物、多层级体积看起来巨大。原因 5你看到的体积并不是浏览器实际加载的大小你看的是.next文件夹大小例如.next ├─ server/ 200MB ├─ static/ 10MB ├─ cache/ 700MB但浏览器实际只会下载.next/static/chunks/*.js这些一般是几十 KB 到几百 KBgzip 后通常不超过 200KB。真实访问量远小于打包产物体积看起来大但不会全部被客户端下载。那为什么 Vue / React 看起来小很多理由简单框架构建内容Vue / Vite纯客户端只有生产可用的文件React SPA纯客户端只有生产可用的文件Next.js客户端 服务端 SSR RSC 路由 运行时环境 元数据Next 就像你让它做饭 → 它把厨房也一起打包了。Vue/React只把做好的一盘菜给你。如何判断真实的页面体积运行next build next analyze或使用插件next-bundle-analyzer然后你会看到浏览器实际下载的 js并不大很多 server-side 代码不会被客户端下载图片优化、中间产物、缓存都占了体积但不影响最终体积如何减少 Next.js 客户端包体积下面是实际有效且常见的方法1. 减少 client component改为 server componentApp Router 最大优点就是默认是服务器组件只有你写 use client 才会成为客户端组件。越少 use client → 客户端包越小。2. 使用dynamic()分包加载const Chart dynamic(() import(./Chart), { ssr: false });3. 去掉运行时 polyfillsnext.config.js: experimental: { optimizePackageImports: [lodash, date-fns] }4. 打开 SWC 压缩Next.js 默认开启但可以确保启用swcMinify: true,5. 依赖优化比如避免lodash改用 lodash-es 按需moment体积巨大改成 dayjsantd 全量引入按需引入 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目 为什么 Next.js 打包比 Vue/React 大？
文章目录原因 1Next.js 默认包含 SSR / RSC / Edge Runtime 等功能原因 2Next.js 每个路由都有 Server Client bundling原因 3Next.js 默认使用 React体积比 Vue 大原因 4Next.js 的构建产物包含大量元数据和中间产物原因 5你看到的体积并不是浏览器实际加载的大小那为什么 Vue / React 看起来小很多如何判断真实的页面体积如何减少 Next.js 客户端包体积1. 减少 client component改为 server component2. 使用 dynamic() 分包加载3. 去掉运行时 polyfills4. 打开 SWC 压缩5. 依赖优化Next.js打包体积“看起来”比 Vue/React 更大这是非常常见的现象但这并不是因为 Next.js 本身臃肿而是由于SSR / 路由机制 / 打包模式 / 产物结构等带来的客观差异。原因 1Next.js 默认包含 SSR / RSC / Edge Runtime 等功能VueVite、Create React App、React Vite 本质上都是纯前端 SPA。但 Next.js 是全栈框架打包产物包含更多内容内容Vue/React SPANext.js客户端 JS✔️✔️SSR 渲染代码❌✔️服务端路由代码❌✔️API Routes / Server Actions❌✔️Edge Runtime / Node runtime❌✔️两套 bundle客户端服务端❌✔️➡️你看到的.next目录体积大是因为它包含了客户端 服务端 两份产物。Vue/React 只生成客户端 bundle所以自然更小。原因 2Next.js 每个路由都有 Server Client bundling例如/dashboard这个页面Next.js 会生成/dashboard—— SSR 渲染代码Server 端/dashboard.client.js—— 客户端 hydration 脚本shared chunks以及 RSC 文件如你用到 App Router而 Vue/React SPA 只有/assets/dashboard.xxx.js纯客户端➡️多了一倍甚至数倍的文件数量。原因 3Next.js 默认使用 React体积比 Vue 大React 本身体积大约 42kb gzip比 Vue大约 20kb gzip更大。分别看 SPA 打包Vue生产包非常小React会大一些Next.js因为 React SSR Routing Runtime → 自然再大一些原因 4Next.js 的构建产物包含大量元数据和中间产物.next目录里包含serverserver/chunksserver/appApp Routerserver/pages如果使用clientclient/chunksmiddlewareimg optimizer fileswebpack cacheserver build manifest如下Vue 和 Vite React的dist/目录基本只包含jscssassets➡️ Next.js 多产物、多层级体积看起来巨大。原因 5你看到的体积并不是浏览器实际加载的大小你看的是.next文件夹大小例如.next ├─ server/ 200MB ├─ static/ 10MB ├─ cache/ 700MB但浏览器实际只会下载.next/static/chunks/*.js这些一般是几十 KB 到几百 KBgzip 后通常不超过 200KB。真实访问量远小于打包产物体积看起来大但不会全部被客户端下载。那为什么 Vue / React 看起来小很多理由简单框架构建内容Vue / Vite纯客户端只有生产可用的文件React SPA纯客户端只有生产可用的文件Next.js客户端 服务端 SSR RSC 路由 运行时环境 元数据Next 就像你让它做饭 → 它把厨房也一起打包了。Vue/React只把做好的一盘菜给你。如何判断真实的页面体积运行next build next analyze或使用插件next-bundle-analyzer然后你会看到浏览器实际下载的 js并不大很多 server-side 代码不会被客户端下载图片优化、中间产物、缓存都占了体积但不影响最终体积如何减少 Next.js 客户端包体积下面是实际有效且常见的方法1. 减少 client component改为 server componentApp Router 最大优点就是默认是服务器组件只有你写 use client 才会成为客户端组件。越少 use client → 客户端包越小。2. 使用dynamic()分包加载const Chart dynamic(() import(./Chart), { ssr: false });3. 去掉运行时 polyfillsnext.config.js: experimental: { optimizePackageImports: [lodash, date-fns] }4. 打开 SWC 压缩Next.js 默认开启但可以确保启用swcMinify: true,5. 依赖优化比如避免lodash改用 lodash-es 按需moment体积巨大改成 dayjsantd 全量引入按需引入 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目