It would be great if Fusion can take imported image assets (either from JSX or CSS) into the public resource folder at build time, using the standard Webpack 4 url-loader configuration (https://v4.webpack.js.org/loaders/url-loader/). This would be convenient for developers who prefer to have component-specific images stored in its own JSX component directory, rather than having to manually copy all the images to the local "resources" folder and explicitly refer to that file path in JSX using the Fusion context API, that looks like the only workflow for static images used in the app except for SVG assets.
Guest
Hi Joe,
We've reviewed this idea and how to best implement it couple times. We understand a simple webpack configuration option can make this easy for you, but we are really careful to relay any webpack configuration to our developers and have to maintain them separately. For now this is a valid but not a critical gap since you can place all static assets to assets folder in dist that will not be bundled in your JS bundle. Unless you are manipulating SVG after imports, this should not be an issue. We understand this approach will not make your component files as tidy as they can be from an organizational perspective (to have static assets residing in the same component folder).
For now, we'll keep this idea in the future consideration bucket and revisit later.
On second thought, I think it would be easier to set the limit to "0" so all SVG/Image assets would be exported as external resources by default - This would leave the choice to Fusion client developers if they want to embed certain assets as Base64 in the Fusion bundle.
In most cases I think the assets are best to be located out of bundle by default given the tendency that the Fusion monobundle will grow quickly in size with the current url-loader configuration.
Hi Fatih,
Thanks for your reply. Indeed the image import seem to be able to picked up by Fusion but converted to Base64 string in the monobundle and that would make the bundle really large e.g. when we use high-res image background in some component.
Regarding the possible solution, Webpack url-loader has a "limit" parameter that can be configured as the bytes threshold to determine whether an asset should be converted to Base64 if it's small enough to be included in the compiled code, or an URL points to the file exported by Webpack to the output folder. (Could be a special "fusion-assets" subfolder in the "resources" directory that is managed by Webpack directly)
What do you think?
Hi Joe,
We use webpack url-loader for static assets (images/fonts) but we don't move it to the resources folder. Is there any example of how you guys think this would work?