search

yo35 / kokopu-react

A React-based library to create and display chessboard and chess-related components.
https://www.npmjs.com/package/kokopu-react
GNU Lesser General Public License v3.0
6 stars 1 forks source link

symbols.css is showing up as half a MB #5

Closed JeffML closed 8 months ago

JeffML commented 8 months ago

It's the largest dependency in my project right now.

image

After a webpack build, the CSS is huge, but the CSS source file is only 2K, so I wonder what's going on? Any idea?

JeffML commented 8 months ago

I upgraded my packages (kokopu-react v3.0.1), and now I show piecesets.ts as being 530KB. After doing some research, I believe webpack is converting the image links in that file to byte-encoded images (in addition to packing up the now-redundant sprite png files).

I'm not sure what to recommend. Perhaps make piece sets separate packages from kokopu-react proper?

yo35 commented 8 months ago

What Webpack does depends on how you configure it. For example, if you look at the source code of the lib documentation (https://kokopu-react.yo35.org/docs/3.0.1/build/bundle.2948829d.js) - which contains a webpacked-version of the lib itself - you'll see that the chess piece images are referenced by their URL, as expected.

JeffML commented 8 months ago

Yes, but in this case I used create-react-app to initialize my react project, which was pretty standard at the time. Unfortunately it encapsulates webpack in a way that's not configurable (which is one reason why it recently became no longer the standard).

So I will have to fork something. I only need one piece set (which is probably the most common use case), so I will look at forking kokopu-react and strip out the sets I don't need.

On Sun, Nov 5, 2023, 11:19 AM Yoann Le Montagner @.***> wrote:

What Webpack does depends on how you configure it. For example, if you look at the source code of the lib documentation ( https://kokopu-react.yo35.org/docs/3.0.1/build/bundle.2948829d.js) - which contains a webpacked-version of the lib itself - you'll see that the chess piece images are referenced by their URL, as expected.

— Reply to this email directly, view it on GitHub https://github.com/yo35/kokopu-react/issues/5#issuecomment-1793821935, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2VY3PCQPPBQKLVD2DRBSTYC7RDJAVCNFSM6AAAAAA6VBKV4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTHAZDCOJTGU . You are receiving this because you authored the thread.Message ID: @.***>

JeffML commented 8 months ago

Or maybe I misunderstood... I can use the already bundled version instead? I'll try that.

On Sun, Nov 5, 2023, 11:19 AM Yoann Le Montagner @.***> wrote:

What Webpack does depends on how you configure it. For example, if you look at the source code of the lib documentation ( https://kokopu-react.yo35.org/docs/3.0.1/build/bundle.2948829d.js) - which contains a webpacked-version of the lib itself - you'll see that the chess piece images are referenced by their URL, as expected.

— Reply to this email directly, view it on GitHub https://github.com/yo35/kokopu-react/issues/5#issuecomment-1793821935, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2VY3PCQPPBQKLVD2DRBSTYC7RDJAVCNFSM6AAAAAA6VBKV4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTHAZDCOJTGU . You are receiving this because you authored the thread.Message ID: @.***>

yo35 commented 8 months ago

create-react-app offers several options to customize its behavior. In particular, whether images should be inlined or not is controlled by the IMAGE_INLINE_SIZE_LIMIT environment variable. See create-react-app documentation: https://create-react-app.dev/docs/adding-images-fonts-and-files

JeffML commented 8 months ago

Okay, thank you for that bit of information. I did research this and it seems to be unknown to many (I also looked at the react-scripts code, and saw a 10000Mb limit hardcoded somewhere, but perhaps that's overridden elsewhere).

I'll give it a try.

On Mon, Nov 6, 2023 at 11:07 AM Yoann Le Montagner @.***> wrote:

create-react-app offers several options to customize its behavior. In particular, whether images should be inlined or not is controlled by the IMAGE_INLINE_SIZE_LIMIT environment variable. See create-react-app documentation: https://create-react-app.dev/docs/adding-images-fonts-and-files

— Reply to this email directly, view it on GitHub https://github.com/yo35/kokopu-react/issues/5#issuecomment-1795977662, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2VY3PV6L3RLF2ZBI3Q6FDYDEYO5AVCNFSM6AAAAAA6VBKV4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJVHE3TONRWGI . You are receiving this because you authored the thread.Message ID: @.***>

JeffML commented 8 months ago

10000 bytes, not Mb <:-\

Okay, that seems to work and thanks again. Now I have to go to all the message boards I checked and inform them of this env var and be a hero. Closing.