preactjs / wmr

👩‍🚀 The tiny all-in-one development tool for modern web apps.
https://wmr.dev/
MIT License
4.92k stars 109 forks source link

unclear for workbox-recipes, htmlMinifier with create-wmr #916

Closed Aloento closed 2 years ago

Aloento commented 2 years ago

For workbox-recipes, you said in the doc https://github.com/preactjs/wmr/tree/main/packages/sw-plugin#usage

So, do we need yarn add workbox-recipes? In your demo, it seems like we need to install it. Maybe add a sentence to make it clear.


After using create-wmr, we have defineConfigand in package.json we have rollup-plugin-html-minifier. And in https://github.com/preactjs/wmr/wiki/Configuration-Recipes#minifying-html, we should add plugins: [htmlMinifier()] to defineConfig, but we didn't see plugins: [htmlMinifier()] in default defineConfig.

It's unnecessary to add it?

rschristian commented 2 years ago

So, do we need yarn add workbox-recipes?

Yes, you will. You're right, probably worth adding.

preact/compat in your defineConfig -> alias, but I remember we have package "preact-compat".

preact-compat is legacy compat, only for use in Preact v8 and older. In v10, compat moved into the main package. hence preact/compat. 1 less install for users.

https://preactjs.com/guide/v10/upgrade-guide#compat-has-moved-to-core

but we didn't see plugins: [htmlMinifier()] in default defineConfig.

The defineConfig that comes in the template is empty, but you can add additional keys. See https://wmr.dev/docs/configuration

Aloento commented 2 years ago

@rschristian Thank you! and how about htmlMinifier()?

rschristian commented 2 years ago

Sorry, sent the reply early by accident.

You can add it if you wish, your config would look like the following:

import { defineConfig } from 'wmr';
import htmlMinifier from 'rollup-plugin-html-minifier';

export default defineConfig({
    plugins: [htmlMinifier()]
});

defineConfig takes an object as a parameter, and you can pass all sorts of options. We cover them all at https://wmr.dev/docs/configuration

Aloento commented 2 years ago

Sure I can add it if I needed it. I just say that you add this package by default, but you didn't activate it by default. So maybe add a tip in https://wmr.dev/docs#quickstart. Or just activate it by default.

rschristian commented 2 years ago

The savings are probably pretty minimal if you look at your output.

Aloento commented 2 years ago

Thanks!

rschristian commented 2 years ago

I should say that adding rollup-plugin-html-minifier to your plugins by itself will do nothing; we already minify according to its defaults. You can customize the options of that plugin to minify further, but those are things it has not enabled by default for various reasons.

Now, what content can be minified is a bit limited as prerendering happens after the build, so you can't actually use that plugin to minify most of your HTML further, unfortunately. If you set removeAttributeQuotes, for example, you'll only see that effect the content already in your index.html. It won't minify anything that's created from the prerender.