search

microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.
https://aka.ms/fluentui-system-icons
MIT License
5.65k stars 498 forks source link

Bundle size issue: Webpack loads every icon even if the app only uses one #619

Closed Pistonight closed 11 months ago

Pistonight commented 11 months ago

Hello, I noticed my bundle size is very large and a big portion is @fluentui/react-icons. After some investigation, it seems like a tree-shaking issue.

I found this issue: https://github.com/microsoft/fluentui/issues/25861 which indicates that https://github.com/microsoft/fluentui-system-icons/pull/562 should fix the problem. However, it does not appear to be fixed.

I have created a minimal example that reproduces this issue: https://github.com/Pistonight/webpack-react-icons-testing which shows the following code resulting in an output size of around 9MB

import React from "react";
import ReactDOM from "react-dom/client";
import { Info24Filled } from "@fluentui/react-icons";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<Info24Filled />);

Note: My other projects that use vite instead of webpack does not have this problem. Seems like esbuild is not impacted

Pistonight commented 11 months ago

Found the fix: Using module: "esnext" instead of module: "commonjs" in tsconfig fixed it