date-fns 2 tree-shaking无法生效问题求助

我来帮你定位这个摇树优化没生效的问题，结合你用的date-fns 2.1.0、webpack 4.39.3、TypeScript 3.6.2技术栈，大概率是下面几个环节出了问题，咱们一步步排查：

1. 先检查TypeScript配置（最常见的原因） #

TypeScript的编译选项如果把模块转换成CommonJS，webpack就没法做摇树优化——因为CommonJS是动态导入机制，webpack无法静态分析哪些模块被用到。

打开你的tsconfig.json，确认compilerOptions里的这几个配置：

{
  "compilerOptions": {
    "module": "ESNext", // 必须是ES模块格式，不能是CommonJS
    "moduleResolution": "Node",
    "target": "ES5",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

如果之前module设的是CommonJS，改成ESNext或ES6后再重新打包试试。

2. 确认webpack的mode和优化配置 #

webpack 4只有在production模式下才会默认开启摇树优化，development模式为了保留调试信息会关闭这个功能。

检查你的webpack配置文件：

module.exports = {
  mode: 'production', // 必须是production模式
  // ...其他配置
  optimization: {
    usedExports: true, // 显式开启，production默认已开启，但确保没被手动覆盖
    minimize: true
  }
};

如果用了babel-loader配合TypeScript，还要确保babel没有把ES模块转成CommonJS——在.babelrc或babel配置里：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }], // 关闭模块转换
    "@babel/preset-typescript"
  ]
}

3. 再次确认date-fns的导入写法 #

虽然你说按官方文档来，但再仔细核对下：是不是所有导入都是按需引入，没有不小心导入整个库？

正确的写法应该是：

import { addYears, addMonths, addWeeks, addDays, addHours, addMinutes } from 'date-fns';

绝对不要用下面这些写法，它们会强制导入整个date-fns库：

// 错误写法！会打包整个库
import * as dateFns from 'date-fns';
import dateFns from 'date-fns';

4. 用打包分析工具定位问题 #

如果上面的配置都没问题，建议用webpack-bundle-analyzer插件直观查看bundle内容：

1. 安装插件：npm install webpack-bundle-analyzer --save-dev
2. 在webpack配置里添加：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...其他配置
  plugins: [new BundleAnalyzerPlugin()]
};

3. 重新打包，会自动打开一个页面，你能清楚看到date-fns的哪些模块被打包了——如果确实是整个库都进来了，再检查有没有其他文件偷偷导入了date-fns的其他模块。

5. 尝试升级date-fns版本 #

date-fns 2.1.0是比较早期的版本，可能存在摇树优化的兼容性bug。可以尝试升级到最新的2.x稳定版，看看能不能解决问题：

npm install date-fns@latest --save

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