react中的tree-shaking的一些疑问

Question

目的：首先直接抛出问题在ts头部中我引入了一段代码再根据环境变量去决定是否去执行改代码
预期：打包出来的文件并没有因为是生产环境而减少改文件的大小
代码如下：

//httpLogin.ts
import mockAdapterFunc from "mock";
const { PUBLIC_URL: basename, REACT_APP_NEED_MOCK: needMock } = process.env;
needMock && mockAdapterFunc(http);

//mock.js
import { AxiosInstance } from "axios";
var MockAdapter = require("axios-mock-adapter");

export default function mockAdapterFunc (http: AxiosInstance) {
  var mock = new MockAdapter(http, { onNoMatch: "passthrough" });
  mock.onPost("/sso/logxxxin").reply(200, {
    user: "whidy",
  });
}

需要说明的是npm run build中needMock是为false 不执行后面的方法
打包出的代码分析图如下

如果手动删除axios-mock-adapter是不存在的

Answer 1

tree-shaking是在构建模块代码时根据代码顶部import语句生成dependicens graph是进行的，属于静态编译阶段进行的，如果你要在这种运行阶段才决定是否引入一个模块，你可以了解一下webpack的异步模块