Next.js v13+生产环境代码打包机制及是否可仅转译不打包

一、默认生产环境打包方式 #

Next.js v13+ 在生产环境默认使用 Webpack 完成打包构建，同时搭配框架内置的一系列优化策略：

• 自动做代码拆分，把代码拆分成多个小chunk，实现按需加载，降低首屏加载耗时
• 对JS、CSS等资源进行压缩、混淆，移除未使用的冗余代码（Tree Shaking）
• 优化静态资源，比如自动处理图片格式转换、配置懒加载，对字体资源做适配处理
• 针对App Router和Pages Router分别做适配性打包，保证不同路由模式下的资源加载效率

二、能否仅转译代码而不打包？ #

Next.js作为全栈框架，核心设计就是提供开箱即用的构建优化，默认没法直接跳过打包步骤，但可以通过以下方式近似实现类似需求：

• 用 next dev 开发模式：开发环境下Turbopack（或旧版Webpack）仅做代码转译，不会执行生产级的打包压缩，代码以相对原始的状态运行，但这只适合开发场景，不能用于生产
• 自定义Webpack配置：修改 next.config.js，调整Webpack的配置项，禁用代码拆分、压缩等打包优化逻辑，但这没法完全跳过打包流程，只是弱化了打包的优化程度，还可能影响框架原有功能的正常运行
• 单独处理特定文件：如果只需要转译部分文件，可以单独用Babel、TypeScript等工具处理，再手动集成到Next.js项目中，但这会脱离框架的默认构建流程，需要自己处理依赖管理、资源加载等问题

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