Minify HTML and inline CSS

[wagerfield]

Is your feature request related to a problem? Please describe.

Would be great if vite automatically minified the HTML of the index.html file at the root of the repo out of the box.

I have attempted this with rollup-plugin-html-minifier and rollupInputOptions.plugins by doing:

// vite.config.js
const htmlMinifier = require("rollup-plugin-html-minifier")

module.exports = {
  rollupInputOptions: {
    plugins: [
      htmlMinifier({
        collapseWhitespace: true,
      }),
    ],
  },
}

...but this has no effect on the outputted dist/index.html file. After stepping through the buildPluginHtml function in vite's source it would appear that the HTML isn't being piped through any Rollup plugins which is why this doesn't work...but I could be wrong!

Atop of minifying the HTML with something like html-minify-terser it would be nice to have an option to inline the CSS in the head of the index.html file.

Perhaps you could add an stylesInlineLimit option similar to assetsInlineLimit with a sensible default like 5-10kb? So by default both the HTML would be minified AND the styles inlined in the head up to a certain threshold.

This would create one less network request and is an optimisation step that most frameworks out there like Nuxt, Gatsby etc. take to speed things up even more.

Thanks for the brilliant work on vite and your consideration 🎉

[wagerfield]

For completeness I also tried doing:

// vite.config.js
const { minify } = require("html-minifier-terser")

module.exports = {
  transforms: [
    {
      test: ({ path }) => /\.html$/.test(path),
      transform: ({ code }) => minify(code),
    },
  ],
}

...but the code that's passed into the transform function for the index.html file isn't the HTML but rather a string that looks like this: '\nimport "/src/main.js"' 🤔

[antfu]

Related to #528

[yyx990803]

Should be feasible after #793

[mrienstra]

This plugin can minify HTML: https://github.com/anncwb/vite-plugin-html
(as per #1060)

This one inlines CSS and JS: https://github.com/richardtallent/vite-plugin-singlefile
(as per #621)

I just tried using them together, so far so good.