Next.js生产构建中Webpack未Tree Shaking未使用导入的问题

我在Next.js应用执行生产构建时，Webpack并未对未使用的导入进行Tree Shaking处理，且已在@shared/graphql.mock包的package.json中配置了sideEffects: false。

相关代码 #

import { MockData } from '@shared/graphql.mock'

const should = (
  fn,
) => {
  if (process.env.NODE_ENV !== 'production') {
    return fn
  }
}

/*#__PURE__*/ const mockData = should(() => MockData)()

Webpack输出结果 #

const should = (fn)=>{
    if (false) {}
};

/*#__PURE__*/ const mockData = should(() => _shared_graphql_mock_DATA__WEBPACK_IMPORTED_MODULE_2__.N[0])();

涉及文件 #

• packages/server/server.ts
• apps/web/pages/api/test.ts

输出文件 #

apps/web/.next/server/pages/api/test.js

解决方法 #

1. 明确should函数的返回值 #

当前should函数在生产环境下无返回值，Webpack无法确定调用结果是否被使用，因此保留了相关引用。修改函数，让生产环境明确返回undefined：

const should = (fn) => {
  if (process.env.NODE_ENV !== 'production') {
    return fn
  }
  // 生产环境明确返回undefined
  return undefined
}

2. 优化导入逻辑，直接做环境区分 #

利用process.env.NODE_ENV的编译时替换特性，在导入层面做条件处理，让Webpack更易识别未使用代码：

let mockData;
if (process.env.NODE_ENV !== 'production') {
  import { MockData } from '@shared/graphql.mock'
  mockData = MockData
}

3. 确保依赖包符合Tree Shaking要求 #

• 确认@shared/graphql.mock包使用ES模块（ESM）格式，在其package.json中配置module字段指向ESM入口文件，Webpack对ESM的Tree Shaking支持更完善。
• 再次确认包的sideEffects配置为false，确保没有隐藏副作用。

4. 优化Next.js的Webpack配置 #

在next.config.js中添加配置，标记should为纯函数，帮助Terser更精准地移除无用代码：

module.exports = {
  webpack: (config) => {
    config.optimization.minimizer.forEach(minimizer => {
      if (minimizer.options?.terserOptions) {
        minimizer.options.terserOptions.compress.pure_funcs = ['should'];
      }
    });
    return config;
  }
}

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