My app provides a dropdown of icons. We're using simple-icons, bootstrap-icons, and some custom icons that we developed in-house.
Those icons are hosted by our application using a webpack module rule. For example, this is what the rule looks like for simple-icons:
{
test: /simple-icons\/.*\.svg$/,
type: "asset/resource",
generator: {
filename: "icons/simple-icons/[name][ext]",
},
},
This tells webpack to copy all SVG files from the simple-icons npm package to the icons/simple-icons/ folder in the final build. These icons are then accessible on our website at their respective paths. For example, the github.svg file is accessible at <BASE_URL>/icons/simple-icons/github.svg.
This approach works fine but it bloats the bundle size. Would be great to serve these icons from a CDN and remove them from the bundle.
I thought about writing the icons to S3 but realized they are already hosted by CDN's, e.g. jsDelivr. So I changed the rule above so my app will serve the icons from jsDelivr:
{
test: /simple-icons\/.*\.svg$/,
type: "asset/resource",
generator: {
emit: false,
publicPath: `https://cdn.jsdelivr.net/npm/simple-icons@${
require("simple-icons/package.json").version
}/`,
filename: "icons/[name][ext]",
},
},
Note, emit=False tells webpack NOT to copy the file to the server, which makes sense because the files are already there.
This removes the icons from the bundle and allows me to pull them from jsDelivr. Are there any major cons with this approach / implementation? I'm very new to webpack so just wondering if I configured this correctly.
