Next.js应用中空页面为何有323KB的打包体积？

我安装了next-bundle-analyzer并执行build命令，得到如下结果：

Route (pages)                                Size     First Load JS
┌ ○ /                                        2.62 kB         325 kB
├   /_app                                    0 B             322 kB
├ ○ /_offline                                294 B           323 kB
├ ○ /[id]                                    2.96 kB         655 kB
├ ○ /404                                     185 B           323 kB
├ λ /account                                 6.64 kB         329 kB
├   └ css/bab50d110eee10ae.css               985 B
├ λ /additem                                 8.54 kB         640 kB
├ ○ /emptypage                               270 B           323 kB

我搜索“how to reduce next js bundle size”后尝试了代码拆分、移除首页冗余内容，但没有改善。于是创建了仅含如下代码的emptypage.tsx：

import React from 'react';
function Emptypage() { return <div>This is empty page</div>; }

export default Emptypage;

却发现它的首加载JS达323KB，这是怎么回事？

核心原因：首加载JS包含公共运行时与_app共享代码 #

First Load JS不是页面单独的代码体积，而是页面自身代码 + _app公共代码 + Next.js/React核心运行时的总和：

• 从build结果能看到，/_app的First Load JS是322KB，这是所有页面都会共享的基础包，包含React、Next.js的核心运行时、_app.tsx里的全局依赖（比如全局样式、公共组件）
• 你的空页面自身只有270B，加起来刚好是323KB左右，这属于正常现象

结合bundle analyzer截图来看，体积占大头的是_next/static/chunks/main.js这类公共chunk，里面是框架核心代码和全局依赖，并非空页面本身的冗余内容。

可落地的优化方向 #

• 检查_app.tsx：看看有没有引入不必要的全局依赖（比如完整的UI库、大体积全局样式），尽量改成按需导入
• 开启SWC压缩：Next.js 12+默认用SWC，确保next.config.js里开启了压缩配置
• 动态导入组件：用next/dynamic延迟加载非首屏必需的组件，避免打包进首加载包
• 精简第三方依赖：分析bundle里的大依赖，替换成更轻量的替代方案（比如用date-fns代替moment.js）
• 依赖去重：执行npm dedupe或yarn dedupe清理重复的依赖包
• 开启图片优化：统一用Next.js的Image组件，自动压缩图片并延迟加载

内容的提问来源于stack exchange，提问作者Lukas Vis