~a

stuff i learned by me fucking around with sveltekit for a bit

prerequisites

1npm i -D @sveltejs/adapter-static  # for static file output
2npm i -D svelte-preprocess  # to allow for <style global>
3npm i -D html-minifier  # to minify html/css/js output

allow global styles

you need to install and initialize svelte-preprocess instead of vitePreprocess if you want to use <style global> instead of :global(selector) for every single selector

svelte.config.js:

 1import adapter from '@sveltejs/adapter-static';
 2import preprocess from 'svelte-preprocess';
 3
 4/** @type {import('@sveltejs/kit').Config} */
 5const config = {
 6	kit: {
 7		adapter: adapter()
 8	},
 9	preprocess: [preprocess()]
10};
11
12export default config;

static site generation with zero javascript

enable prerendering (keep ssr enabled) to have a static build. if you turn off ssr then your build will be empty

however you can turn off csr to disable routing, and this results in a zero-js build output

src/routes/+layout.js:

1import {dev} from '$app/environment'
2
3export const prerender = true;
4export const csr = dev;

minifying

if you wanna minify the build output you can create a Handle hook to minify each page before it is server-side-rendered

src/hooks.server.js:

 1import { minify } from 'html-minifier';
 2import { building } from '$app/environment';
 3 
 4const minification_options = {
 5  collapseBooleanAttributes: true,
 6  collapseWhitespace: true,
 7  conservativeCollapse: true,
 8  decodeEntities: true,
 9  html5: true,
10  ignoreCustomComments: [/^#/],
11  minifyCSS: true,
12  minifyJS: true,
13  removeAttributeQuotes: true,
14  removeComments: false, // some hydration code needs comments, so leave them in
15  removeOptionalTags: true,
16  removeRedundantAttributes: true,
17  removeScriptTypeAttributes: true,
18  removeStyleLinkTypeAttributes: true,
19  sortAttributes: true,
20  sortClassName: true
21};
22 
23/** @type {import('@sveltejs/kit').Handle} */
24export async function handle({ event, resolve }) {
25  let page = '';
26 
27  return resolve(event, {
28    transformPageChunk: ({ html, done }) => {
29      page += html;
30      if (done) {
31        return building ? minify(page, minification_options) : page;
32      }
33    }
34  });
35}