ToDo: Build a swc plugin and optimize images for components that are not evaluated at build time.

[dc7290]

Currently, with this library, images can be optimized at build time using next/image. However, images are not optimized for components that cannot be evaluated at build time. For example, components that are loaded only on the client side using next/dynamic, or components whose rendering is controlled using useState, etc.

To address this, we believe that static analysis is necessary and would like to use the SWC code conversion used in Next.js to detect images that cannot be evaluated at build time before they are built.

[dc7290]

relation: #63

[dc7290]

We have decided to take the direction of borrowing webpack's bundling mechanism, considering that there is a large risk of omission of consideration when doing static analysis. This way, we can safely add functionality while riding on the shoulders of giants.

The basic policy is as follows

1. where images are imported using require or import, read the image path and add it to the list of images to be optimized.
2. For images in public directories, add all images to the list of images to be optimized (this also allows for image components that use static strings)

[Que-tin]

Hey,

I ran into a problem that seems related to this topic. But I'm not sure how / why.

I used dynamic imports at build time to make sure pages only load the components that are used on the page. (it's basically a Pagebuilder). So far so good. The images, for some reason, in these components won't get optimized, but the src gets swapped if it was optimized.

So I don't see any images at all because there are paths to images which had never been created. To me it looks like a synchornization problem, but I'm not sure.

Any ideas?

[dc7290]

@Que-tin

Thank you for your comment.

Currently this library can only optimize images used at build time. This means that with dynamic import, the component is evaluated for the first time at runtime, so it is rendered to the client with the images not yet optimized. Therefore, the image path specified in src will result in a 404.

The solution is to use static analysis such as babel or SWC to detect the images being used before building, or to use the It is going to be a form of adding behavior to the webpack dependency resolution flow.

Basically, I am planning to use the webpack (turbopack) functionality.

By the way, what do you mean by synchronization problems?

[github-actions[bot]]

🎉 This issue is included in version v3.0.0.