Next.js构建时是否编译环境变量不可达组件并做TS/Lint校验？

假设我们有如下代码：

import PageA from './PageA'
import PageB from './PageB'

export default function BranchPage(){
  // 构建阶段 process.env.CURRENT_PAGE 取值为 'a'
  return process.env.CURRENT_PAGE === 'a' ? <PageA/> : <PageB/>
}

当构建阶段环境变量process.env.CURRENT_PAGE值为a时，PageB组件属于不可达代码分支，对应行为结论如下：

• 生产构建产物层面：不会打包PageB代码
  Next.js生产构建阶段会首先将代码里的process.env.XXX环境变量静态替换为构建时的实际值，替换后上述分支判断会变成常量判断'a' === 'a' ? <PageA/> : <PageB/>，后续构建链路里的Tree Shaking（死代码消除）逻辑会自动移除永远不会执行的PageB分支，同时删掉未被使用的PageB导入语句，最终输出的生产资源里不会包含PageB的相关代码。

• TypeScript类型检查层面：默认仍会校验PageB
  Next.js构建时的TS类型检查是独立于打包逻辑的步骤，执行的是项目依赖的TypeScript编译器能力，会按照tsconfig.json里的include配置扫描所有匹配的源码文件，不会因为某段代码属于不可达分支就跳过对应文件的校验。只要PageB在TS的扫描范围内，哪怕它永远不会被渲染，只要文件本身存在类型错误，构建阶段的类型检查步骤就会抛出错误阻断构建。

• Lint校验层面：默认仍会校验PageB
  Next.js内置的ESLint校验逻辑和TS检查逻辑一致，默认会扫描项目内所有符合校验范围的源码文件，不会根据构建时的环境变量分支逻辑排除特定文件。只要PageB在Lint扫描范围内，存在不符合ESLint规则的写法，就会触发Lint报错。

注：如果你手动在next.config.js里关闭了构建时的TS检查、ESLint检查，或者配置了对应的文件排除规则，上述校验行为会按照你的自定义配置生效，这属于特殊配置场景，不是默认行为。

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