search

Josh-McFarlin / remix-image

A React component for responsive images in Remix
https://remix-image.mcfarl.in
MIT License
330 stars 24 forks source link

WASM too large for cloudflare workers #46

Closed hiaw closed 2 years ago

hiaw commented 2 years ago

Describe the bug

The given WASM for cloudflare example could not be deployed.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Clone the example /cloudflare-workers and do npm run deploy

Expected behavior

It should deploy successfully.

Screenshots or Videos

![Uploading CleanShot 2022-07-05 at 18.53.44@2x.png…]()

Platform

Additional context

No response

Josh-McFarlin commented 2 years ago

Hey @hiaw,

So Remix-Image-Wasm supports:

It does this by including one or two .wasm files for every image type (and actually includes another file for fast resizing).

The problem is each of the files is pretty large, so depending on the size of your app it might go over the max size.

I've been looking for a different wasm image transformation package that might have a smaller bundle size, or try to see if it's possible to merge these files into one to save more space.

In the meantime, here's something we can try that may or may not work, but I can come out with a patch if it doesn't.

When you downloaded Remix-Image-Wasm, it asked you to add the following code to your wrangler.toml file:

[wasm_modules]
AVIF_ENC_WASM = "node_modules/remix-image-wasm/avif_enc.wasm"
AVIF_DEC_WASM = "node_modules/remix-image-wasm/avif_dec.wasm"
JPEG_ENC_WASM = "node_modules/remix-image-wasm/jpeg_enc.wasm"
JPEG_DEC_WASM = "node_modules/remix-image-wasm/jpeg_dec.wasm"
PNG_WASM = "node_modules/remix-image-wasm/png.wasm"
WEBP_ENC_WASM = "node_modules/remix-image-wasm/webp_enc.wasm"
WEBP_DEC_WASM = "node_modules/remix-image-wasm/webp_dec.wasm"
RESIZE_WASM = "node_modules/remix-image-wasm/resize.wasm"

If I had to guess, you probably aren't using AVIF images, so you should remove the lines that start with AVIF_ENC_WASM and AVIF_DEC_WASM. If you aren't using another format like JPEG, you can also remove those .wasm files. Just make sure you keep the line starting with RESIZE_WASM in your wrangler.toml.

By removing these lines, you will lose the ability to use AVIF images as inputs and outputs, but your bundle size will be smaller.

I haven't tested this yet, but planning on adding support for it in the future. I'm going to make Remix-Image-Wasm detect which .wasm files have been included, so it will automatically fall back to using pureTransformer if not. This means you can choose which files you want to be fast, such as keeping the WEBP .wasm files, while still supporting PNG by falling back to pureTransformer.

(Note: it's possible you could customize depending on your input file types and output file types. Say your images would always be provided as a JPEG or PNG, and then you would always output them as WEBP or PNG. Files that end in _DEC are for input files, while _ENC are for output files, but the PNG file is combined. In this case, you would make your file:

[wasm_modules]
JPEG_DEC_WASM = "node_modules/remix-image-wasm/jpeg_dec.wasm"
PNG_WASM = "node_modules/remix-image-wasm/png.wasm"
WEBP_ENC_WASM = "node_modules/remix-image-wasm/webp_enc.wasm"
RESIZE_WASM = "node_modules/remix-image-wasm/resize.wasm"

)

So try the above solution, and let me know if it lowers your bundled size enough to upload to Cloudflare. Once uploaded, it may or may not work since I haven't added code to explicitly support this case yet, but I'm primarily concerned with it passing upload. I'll be making a PR and releasing a new build on npm adding full support for these changes.

Josh-McFarlin commented 2 years ago

Hey @hiaw,

I just released remix-image-wasm v0.1.2 which supports leaving out .wasm files if you don't need to support that file type.

Documentation here: https://remix-image.mcfarl.in/docs/tutorial-extras/web-assembly#reducing-bundle-size