저는 몇 달 전에 프론트엔드 프로젝트를 진행하고 있었습니다. 이 프로젝트는 레거시 대시보드에 통합되도록 만들어진 마이크로프론트엔드였습니다.

마이크로프론트엔드 접근 방식을 선택한 이유는 대시보드의 복잡성을 줄이기 위해서였습니다. 저는 이 도전에 신나서 뛰어들었습니다.

웹팩, 반응, 타이프스크립트를 사용하여 마이크로프론트엔드를 설정했습니다. 저는 CSS-IN-JS 프레임워크로 chakra ui를 사용했고 API 통합을 위해 axios를 사용했는데 모든 것이 잘 작동했습니다. 그러나 프로젝트의 빌드 크기는 약 14MB였습니다. 마이크로프론트엔드의 경우 이는 터무니없이 컸습니다. 이로 인해 통합된 대시보드에서 페이지 응답이 매우 느려졌습니다. 그래서 빌드를 최적화해야 한다는 새로운 도전에 직면하게 되었습니다.

스타일링에 CSS-IN-JS 프레임워크를 사용했기 때문에 빌드가 그렇게 크다고 생각했습니다. 그래서 전체 코드베이스를 chakra-ui에서 sass로 리팩토링했습니다. 빌드 크기가 14MB에서 약 21MB로 늘어났습니다.

그때 문제가 CSS 라이브러리나 코드에 관한 것이 아니라 webpack 구성에 관한 것이라는 것을 알았습니다. 나는 webpack 구성으로 많은 시행착오를 시작했습니다. 그런 다음 devtool을 제거했을 때 빌드 크기가 14MB에서 약 600kb로 늘어났다는 것을 발견했습니다. 그런 다음 devtool에 대한 webpack 문서를 확인했습니다. 의무사항은 아니라는 걸 깨달았습니다. 자세한 내용은 여기를 참조하세요:.

여기 내 웹팩 구성을 살짝 엿볼 수 있습니다.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

요약하자면, 제가 겪은 문제에 대한 해결책은 코드 한 줄만 제거하면 해결되었습니다.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

읽어주셔서 감사합니다. 이 내용이 도움이 되었기를 바랍니다.