Minifying CSS and JS in Eleventy WebC Components
The WebC plugin in Eleventy by default uses the Bundle plugin to aggregate CSS and JS found in WebC components.
To minify CSS and JS in WebC components the bundlePluginOptions in the WebC plugin option needs to be configured. Below is a sample eleventy configuration file:
const pluginWebc = require("@11ty/eleventy-plugin-webc");
const CleanCSS = require("clean-css");
const { minify: jsminify } = require("terser");
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pluginWebc, {
bundlePluginOptions: {
transforms: [
async function (content) {
if (this.type === "css") {
return new CleanCSS({}).minify(content).styles;
}
if (this.type === "js") {
return (await jsminify(content)).code;
}
return content;
},
],
},
});
}