react中的tree-shaking的一些疑问

捕虾船船长
  • 3
新手上路,请多包涵

目的:首先直接抛出问题在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 不执行后面的方法
打包出的代码分析图如下
image.png
如果手动删除axios-mock-adapter是不存在的

回复
阅读 529
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏