如何让Webpack不编译未被实际调用的文件？TypeScript项目求助

问题原因 #

你的代码中testComponent.ts未被执行，但仍被打包到输出文件，核心原因是TypeScript默认编译为CommonJS模块，而Webpack无法对CommonJS模块进行有效的Tree Shaking（因为CommonJS是动态模块系统，Webpack难以静态分析未使用的代码）。此外，缺少明确的Tree Shaking相关配置，导致生产模式下的优化未完全生效。

解决方案步骤 #

1. 修改tsconfig.json，输出ES模块

确保TypeScript编译为ES6+模块，让Webpack能够静态分析导入导出：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

• module: "ESNext"：指定编译输出为ES模块
• moduleResolution: "NodeNext"：适配ES模块的解析规则

2. 优化Webpack配置，启用Tree Shaking

在Webpack配置中添加optimization字段，明确开启代码优化：

const path = require("path");

const bundleOutputDir = "./dist";

module.exports = (env) => {
  return {
    entry: "./src/index.ts",
    output: {
      filename: "output.js",
      path: path.resolve(bundleOutputDir),
    },
    devServer: {
      contentBase: bundleOutputDir,
    },
    plugins: [],
    module: {
      rules: [
        {
          test: /\.ts?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [".ts", ".js"],
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    mode: "production",
    optimization: {
      usedExports: true, // 标记未使用的导出
      sideEffects: false // 告知Webpack无副作用文件，可安全移除未使用模块
    }
  };
};

3. 在package.json中声明无副作用

添加sideEffects字段，进一步明确项目文件无副作用，让Webpack放心Tree Shaking：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "sideEffects": false,
  // 其他配置...
}

验证效果 #

修改后重新执行Webpack构建，输出文件中将不再包含testComponent.ts的代码，最终输出会简化为：

(()=>{"use strict";console.log("Will go to this")})();

关键说明 #

• ES模块是Tree Shaking的前提：只有ES模块的静态导入导出，Webpack才能准确识别未使用的代码；CommonJS的require是动态的，无法被有效分析。
• sideEffects配置：如果你的项目中有带副作用的文件（如全局样式、全局变量修改），需要将这些文件路径列入sideEffects数组，避免被误删。

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