| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Signals</title> | |
| </head> | |
| <body> | |
| <button id="decrement"> | |
| - |
This week, I wrote about using the CSS @import rule to modularize CSS, and some performance challenges with that approach.
tl;dr: the issue isn't the @import rule itself, but that files under 1kb often end up the same size or even bigger when gzipped, so you get no compression benefits.
I ran a few additional tests, and wanted to share the data I found.
kelp.css file hosted on JSDelivr
| // @ts-check | |
| import puppeteer from 'puppeteer' | |
| import fs from 'node:fs/promises' | |
| import path from 'node:path' | |
| import { fileURLToPath } from 'node:url' | |
| const __filename = fileURLToPath(import.meta.url) | |
| const __dirname = path.dirname(__filename) | |
| const ANIMATION_FRAMES = 30 // 1/2 second | |
| const outputDir = path.join(__dirname, '..', 'screenshots') |
| // @ts-check | |
| import puppeteer from 'puppeteer' | |
| import fs from 'node:fs/promises' | |
| import path from 'node:path' | |
| import { fileURLToPath } from 'node:url' | |
| const __filename = fileURLToPath(import.meta.url) | |
| const __dirname = path.dirname(__filename) | |
| const URL = 'https://nolaai.webflow.io/' |
| import puppeteer from 'puppeteer' | |
| import fs from 'node:fs/promises' | |
| import path from 'node:path' | |
| import { fileURLToPath } from 'node:url' | |
| const __filename = fileURLToPath(import.meta.url) | |
| const __dirname = path.dirname(__filename) | |
| const URL = 'https://nolaai.webflow.io/' | |
| const browser = await puppeteer.launch({ |
| accordion-group { | |
| background-color: #f7f7f7; | |
| border-radius: 0.25em; | |
| display: block; | |
| margin-block-end: 1.5em; | |
| padding: 0.5em 1em; | |
| width: 100%; | |
| } | |
| accordion-group [accordion-trigger] { |
| import * as blake3 from 'blake3'; | |
| async function streamHash(stream:ReadableStream<Uint8Array>):Promise<string> { | |
| const hasher = blake3.createHash(); | |
| const reader = stream.getReader(); | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) { | |
| break; |
| import Database from 'better-sqlite3'; | |
| import { createDatabaseClient } from './proxy.ts'; | |
| // 1) Create an in-memory DB and your table(s). | |
| const db = new Database(':memory:'); | |
| db.exec(` | |
| CREATE TABLE users ( | |
| id TEXT PRIMARY KEY, | |
| data JSON | |
| ); |
| var client = window.client = new WebTorrent({ | |
| tracker: { | |
| rtcConfig: rtcConfig | |
| } | |
| }) | |
| client.on('warning', onWarning) | |
| client.on('error', onError) | |
| torrent = client.add(TORRENT, onTorrent) |