Reduce react-icons package size #562

kkocdko · 2023-03-19T08:14:46Z

Define icons by the new createFluentIcon helper function, to reduce the npm package size and bundle size.

The ./lib dir: 21.3 MiB -> 9.85 MiB.

Issue #561

kkocdko · 2023-03-19T08:19:59Z

packages/react-icons/src/utils/createFluentIcon.tsx

+    displayName: string | undefined;
+}
+
+export const createFluentIcon = (displayName: string, width: string, paths: string[]): FluentIcon => {


Function name is similar to ./src/utils/fonts/createFluentFontIcon helper function.

kkocdko · 2023-03-19T08:23:05Z

packages/react-icons/src/utils/createFluentIcon.tsx

+import { FluentIconsProps } from "./FluentIconsProps.types";
+import wrapIcon from "./wrapIcon";
+
+export type FluentIcon = {


Also reduce the size of .d.ts. If not, every icon will produce very long and same type define.

Prefer to use type instead of interface here because it's more transparent and avoid breaking changes in some extreme case.

That's great improvement, it's what I also mentioned when was checking this area.

However, I think that it could be improved even more. In this PR we have:

export declare const Accessibility16Regular: import("../utils/createFluentIcon").FluentIcon; export declare const Accessibility20Filled: import("../utils/createFluentIcon").FluentIcon; export declare const Accessibility20Regular: import("../utils/createFluentIcon").FluentIcon;

But we can do following:

export declare const AccessibilityRegular: FluentIcon; export declare const AccessibilityCheckmarkFilled: FluentIcon; export declare const AccessibilityCheckmarkRegular: FluentIcon;

We need to do following changes to achieve that:

for(const chunk of iconChunks) { chunk.unshift(`import { createFluentIcon } from "../utils/createFluentIcon";`); + chunk.unshift(`import type { FluentIcon } from "../utils/createFluentIcon";`); }

- var jsCode = `export const ${destFilename} = /*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]);` + var jsCode = `export const ${destFilename}: FluentIcon = /*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]);`

kkocdko · 2023-03-19T08:25:25Z

packages/react-icons/convert.js

@@ -1,10 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.

-const svgr = require("@svgr/core");


Remove svgr because now we only want to extract data but never transform the SVG.

layershifter · 2023-03-29T11:04:13Z

@kkocdko we have an issue on Fluent UI side related to this problem, microsoft/fluentui#25989. The idea with modifying glyphs is pretty nice. However, it requires more checks to ensure that nothing else will regress.

Can you please split this PR to two separate ones? I.e. make types changes and code changes separate. With that we could progress faster.

layershifter · 2023-03-29T11:26:42Z

BTW, while I can agree about dist size improvements, improvements in bundle size are not so great 🐱

┌────────────────────────────────┬───────────────┬───────────┐
│ Fixture                        │ Minified size │ GZIP size │
├────────────────────────────────┼───────────────┼───────────┤
│ react-icons (new): single icon │ 5.844 kB      │ 2.659 kB  │
├────────────────────────────────┼───────────────┼───────────┤
│ react-icons (new): 5 icons     │ 7.765 kB      │ 3.041 kB  │
├────────────────────────────────┼───────────────┼───────────┤
│ react-icons (old): single icon │ 5.726 kB      │ 2.603 kB  │
├────────────────────────────────┼───────────────┼───────────┤
│ react-icons (old): 5 icons     │ 8.541 kB      │ 3.028 kB  │
└────────────────────────────────┴───────────────┴───────────┘

kkocdko · 2023-03-30T21:02:51Z

@layershifter

About `.d.ts` file

Update: Fixed. I just remove : FluentIcon and keep import type { FluentIcon }. But don't know why.

I also tried your suggesstion:

for(const chunk of iconChunks) {
    chunk.unshift(`import { createFluentIcon } from "../utils/createFluentIcon";`);
+   chunk.unshift(`import type { FluentIcon } from "../utils/createFluentIcon";`);
}

-      var jsCode = `export const ${destFilename} = /*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]);`
+      var jsCode = `export const ${destFilename}: FluentIcon = /*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]);`

But what I shocked is, if I import the type FluentIcon and write export const xxx: FluentIcon, the /*#__PURE__*/ mark will gone in bundle result! I don't know why and how to fix this. Now fixed and your suggesstion applied.

Split this PR to two separate ones

Maybe hard to do... Create a type FluentIcon in pr 1 and use it in pr 2 will cause build failed, looks unpleasant. And I think this pr with < 40 lines of code should not be split more.

About bundle size in less-icon project

Thanks for you mention, I optimized the createFluentIcon function, please test again.

kkocdko · 2023-03-30T21:32:38Z

packages/react-icons/tsconfig.json

@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "outDir": "lib",
-    "target": "ES6",
+    "target": "esnext",
    "module": "esnext",
    "lib": ["es6", "dom"],


Reduce some size. Because we already use "module": "esnext" before, so no breaking changes.

packages/react-icons/src/utils/createFluentIcon.ts

layershifter · 2023-04-03T10:05:28Z

But what I shocked is, if I import the type FluentIcon and write export const xxx: FluentIcon, the /*#__PURE__*/ mark will gone in bundle result! I don't know why and how to fix this. Now fixed and your suggesstion applied.

Oh my gosh, this TS bug strikes again, it's fixed in newer versions of TS 🙈

@kkocdko you need to wrap it with parens:

var jsCode = `export const ${destFilename}: FluentIcon = (/*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]));`

Here is a repro.

layershifter · 2023-04-03T10:11:52Z

Maybe hard to do... Create a type FluentIcon in pr 1 and use it in pr 2 will cause build failed, looks unpleasant. And I think this pr with < 40 lines of code should not be split more.

Well, I personally looking for a bigger refactor 🐱

As the chain is strange now: createFluentIcon() => wrapIcon()=> useIconState(). For me, it looks like too much for an icon 🤔 However, it has nothing to do with your PR.

I don't have other comments to this PR, @kkocdko great job ⭐ If you would like to contribute more, let's continue on microsoft/fluentui#25989.

kkocdko · 2023-04-03T14:28:44Z

@layershifter wrapIcon() is skipped in createFluentIcon() but the define is not removed to avoid breaking changes.

Feel free to merge, close or reuse the code in this PR.

packages/react-icons/convert.js

Co-authored-by: Oleksandr Fediashov <[email protected]>

tomi-msft · 2023-04-03T20:22:17Z

Thanks for your contribution! This was extremely helpful

kkocdko commented Mar 19, 2023

View reviewed changes

This comment was marked as resolved.

Sign in to view

tomi-msft mentioned this pull request Mar 27, 2023

Investigate react-icons tree-shaking not working correctly microsoft/fluentui#25861

Closed

kkocdko closed this Mar 30, 2023

kkocdko reopened this Mar 30, 2023

Reduce react-icons package size

b498b3e

kkocdko commented Mar 30, 2023

View reviewed changes

sopranopillow reviewed Mar 30, 2023

View reviewed changes

packages/react-icons/src/utils/createFluentIcon.ts Outdated Show resolved Hide resolved

Avoid modify props directly in createFluentIcon

10ffdcf

sopranopillow previously approved these changes Apr 3, 2023

View reviewed changes

layershifter reviewed Apr 3, 2023

View reviewed changes

packages/react-icons/convert.js Outdated Show resolved Hide resolved

Update packages/react-icons/convert.js

ea40c14

Co-authored-by: Oleksandr Fediashov <[email protected]>

tomi-msft dismissed sopranopillow’s stale review via ea40c14 April 3, 2023 17:01

tomi-msft approved these changes Apr 3, 2023

View reviewed changes

tomi-msft merged commit e488e78 into microsoft:main Apr 3, 2023

Pistonight mentioned this pull request Jul 22, 2023

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reduce react-icons package size #562

Reduce react-icons package size #562

kkocdko commented Mar 19, 2023 •

edited

Loading

kkocdko Mar 19, 2023

kkocdko Mar 19, 2023 •

edited

Loading

layershifter Mar 29, 2023

kkocdko Mar 19, 2023

This comment was marked as resolved.

This comment was marked as resolved.

layershifter commented Mar 29, 2023

layershifter commented Mar 29, 2023

kkocdko commented Mar 30, 2023 •

edited

Loading

kkocdko Mar 30, 2023

layershifter commented Apr 3, 2023

layershifter commented Apr 3, 2023

kkocdko commented Apr 3, 2023

tomi-msft commented Apr 3, 2023

Reduce react-icons package size #562

Reduce react-icons package size #562

Conversation

kkocdko commented Mar 19, 2023 • edited Loading

kkocdko Mar 19, 2023

Choose a reason for hiding this comment

kkocdko Mar 19, 2023 • edited Loading

Choose a reason for hiding this comment

layershifter Mar 29, 2023

Choose a reason for hiding this comment

kkocdko Mar 19, 2023

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

layershifter commented Mar 29, 2023

layershifter commented Mar 29, 2023

kkocdko commented Mar 30, 2023 • edited Loading

About .d.ts file

Split this PR to two separate ones

About bundle size in less-icon project

kkocdko Mar 30, 2023

Choose a reason for hiding this comment

layershifter commented Apr 3, 2023

layershifter commented Apr 3, 2023

kkocdko commented Apr 3, 2023

tomi-msft commented Apr 3, 2023

kkocdko commented Mar 19, 2023 •

edited

Loading

kkocdko Mar 19, 2023 •

edited

Loading

kkocdko commented Mar 30, 2023 •

edited

Loading

About `.d.ts` file