├── src
├── vite-env.d.ts
├── pin.ts
├── store.ts
├── typescript.svg
├── utils.ts
├── results.ts
├── editor.ts
├── compressors.ts
├── themeToggle.ts
├── main.ts
├── options.ts
└── style.css
├── public
├── og.png
├── pin.svg
└── zip.svg
├── .prettierrc
├── vite.config.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
├── index.html
└── pnpm-lock.yaml
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arrow-js/min-gzip/HEAD/public/og.png
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "semi": false,
5 | "singleQuote": true
6 | }
7 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import topLevelAwait from 'vite-plugin-top-level-await'
3 |
4 | export default defineConfig({
5 | optimizeDeps: {
6 | exclude: ['brotli-wasm', 'brotli-wasm/pkg.bundler/brotli_wasm_bg.wasm'],
7 | },
8 | plugins: [topLevelAwait()],
9 | })
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/public/pin.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ESNext", "DOM"],
7 | "moduleResolution": "Node",
8 | "strict": true,
9 | "resolveJsonModule": true,
10 | "isolatedModules": true,
11 | "esModuleInterop": true,
12 | "noEmit": true,
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "noImplicitReturns": true,
16 | "skipLibCheck": true
17 | },
18 | "include": ["src"]
19 | }
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "min-gzip",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "devDependencies": {
12 | "typescript": "^4.9.3",
13 | "vite": "^4.2.0",
14 | "vite-plugin-top-level-await": "^1.3.0"
15 | },
16 | "dependencies": {
17 | "@arrow-js/core": "^1.0.0-alpha.9",
18 | "@types/pako": "^2.0.0",
19 | "brotli-wasm": "^1.3.1",
20 | "install": "^0.13.0",
21 | "monaco-editor": "^0.36.1",
22 | "pako": "^2.1.0",
23 | "sucrase": "^3.31.0",
24 | "terser": "^5.16.8"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/pin.ts:
--------------------------------------------------------------------------------
1 | import store from './store'
2 | import { html } from '@arrow-js/core'
3 |
4 | export default function pin() {
5 | return html`
6 |
23 | `
24 | }
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # min-gzip.com
2 |
3 | This is a simple web app that allows you to copy and paste Typescript or JavaScript and see the size of the file after it has been minified + gzipped/brotlied. Although the code needs to be valid in order to be minified, the Typescript typings are automatically striped — so you can count on the resulting calculated sizes to be accurate.
4 |
5 | This is particularly helpful when you are trying to optimize the size of your JavaScript bundle and need to understand which implementation techniques are the most size efficient when sent "over the wire".
6 |
7 | 👉 [min-gzip.com](https://min-gzip.com)
8 |
9 | ## How to use
10 |
11 | 1. Copy and paste your code into the text area.
12 | 2. Check the min/gzip size in the header.
13 |
14 | ## Things to know
15 |
16 | Gzip and Brotli gain in their compression efficiency the larger the artifact so often it is helpful to copy and paste your entire file and then make adjustments to see the impact on total size.
17 |
--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
1 | import { reactive, watch } from '@arrow-js/core'
2 |
3 | const store = reactive({
4 | code: `/**
5 | * Enter some JavaScript or TypeScript code into the editor to see how it
6 | * compresses with gzip, brotli, and minification.
7 | *
8 | * Typescript typings are automatically removed before minification allowing
9 | * for accurate compression results.
10 | */
11 | `,
12 | gzip: 0,
13 | brotli: 0,
14 | min: 0,
15 | pin: false,
16 | pinnedResults: {
17 | gzip: 0,
18 | brotli: 0,
19 | min: 0,
20 | },
21 | useGzip: true,
22 | useBrotli: true,
23 | useMinify: true,
24 | theme:
25 | localStorage.getItem('theme') ||
26 | (window.matchMedia('(prefers-color-scheme: dark)').matches
27 | ? 'dark'
28 | : 'light'),
29 | })
30 |
31 | watch(
32 | () => store.pin,
33 | () => {
34 | if (store.pin) {
35 | Object.assign(store.pinnedResults, {
36 | gzip: store.gzip,
37 | brotli: store.brotli,
38 | min: store.min,
39 | })
40 | }
41 | }
42 | )
43 |
44 | export default store
45 |
--------------------------------------------------------------------------------
/public/zip.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/typescript.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import brotliPromise from 'brotli-wasm'
2 |
3 | export function formatBytes(bytes: number, decimals = 2) {
4 | if (!+bytes) return '0 b'
5 |
6 | const k = 1024
7 | const dm = decimals < 0 ? 0 : decimals
8 | const sizes = ['b', 'kb', 'mb']
9 |
10 | const i = Math.floor(Math.log(bytes) / Math.log(k))
11 |
12 | return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
13 | }
14 |
15 | export async function compressUrlCode(param: string, code: string) {
16 | if (!code) {
17 | const url = new URL(window.location.href)
18 | url.searchParams.delete(param)
19 | history.replaceState(null, '', url.toString())
20 | return
21 | }
22 | const brotli = await brotliPromise
23 | const textEncoder = new TextEncoder()
24 | const compressed = brotli.compress(textEncoder.encode(code))
25 | const url = new URL(window.location.href)
26 | url.searchParams.set(param, compressed.join('.'))
27 | history.replaceState(null, '', url.toString())
28 | }
29 |
30 | export async function decompressUrlCode(param: string) {
31 | const brotli = await brotliPromise
32 | const textDecoder = new TextDecoder()
33 | const compressedString = new URLSearchParams(window.location.search).get(
34 | param
35 | )
36 | if (!compressedString) return ''
37 | const compressed = Uint8Array.from(
38 | compressedString.split('.').map((n) => Number(n))
39 | )
40 | try {
41 | const decompressed = brotli.decompress(compressed)
42 | const code = textDecoder.decode(decompressed)
43 | return code
44 | } catch (error) {
45 | return ''
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | min-gzip | Quickly check how your code compresses with gzip, brotli, and
9 | minification.
10 |
11 |
15 |
16 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
36 |
37 |
38 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/results.ts:
--------------------------------------------------------------------------------
1 | import store from './store'
2 | import { formatBytes } from './utils'
3 | import { html } from '@arrow-js/core'
4 |
5 | export default function () {
6 | return html`
7 |
8 | ${() =>
9 | store.useMinify &&
10 | html`
11 | -
20 | min: ${() => formatBytes(store.min)}
21 |
22 | `}
23 | ${() =>
24 | store.useGzip &&
25 | html`
26 | -
35 | ${() => (store.useMinify ? 'min-gzip' : 'gzip')}:
36 | ${() => formatBytes(store.gzip)}
37 |
38 | `}
39 | ${() =>
40 | store.useBrotli &&
41 | html`
42 | -
51 | ${() => (store.useMinify ? 'min-brotli' : 'brotli')}:
52 | ${() => formatBytes(store.brotli)}
53 |
54 | `}
55 |
56 | `
57 | }
58 |
--------------------------------------------------------------------------------
/src/editor.ts:
--------------------------------------------------------------------------------
1 | import { html, nextTick } from '@arrow-js/core'
2 | import store from './store'
3 | import { compressUrlCode, decompressUrlCode } from './utils'
4 | import * as monaco from 'monaco-editor'
5 | import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
6 | import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
7 | import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
8 | import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
9 | import * as editorApi from 'monaco-editor/esm/vs/editor/editor.api'
10 | // @ts-ignore
11 | self.MonacoEnvironment = {
12 | getWorker(_: any, label: string) {
13 | if (label === 'json') {
14 | return new jsonWorker()
15 | }
16 | if (label === 'html' || label === 'handlebars' || label === 'razor') {
17 | return new htmlWorker()
18 | }
19 | if (label === 'typescript' || label === 'javascript') {
20 | return new tsWorker()
21 | }
22 | return new editorWorker()
23 | },
24 | }
25 |
26 | monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
27 |
28 | export default async function editor() {
29 | const el = html``
30 | const code = await decompressUrlCode('editor')
31 | if (code) store.code = code
32 | let editorUpdateDebounce = 0
33 |
34 | nextTick(async () => {
35 | await new Promise((r) => setTimeout(r))
36 | const editor = editorApi.editor.create(document.getElementById('editor')!, {
37 | language: 'typescript',
38 | value: store.code,
39 | automaticLayout: true,
40 | theme: store.theme === 'dark' ? 'vs-dark' : 'vs',
41 | })
42 | editor.getModel()?.onDidChangeContent(() => {
43 | clearTimeout(editorUpdateDebounce)
44 | store.code = editor.getModel()?.getLinesContent().join('\n') ?? ''
45 |
46 | editorUpdateDebounce = setTimeout(() => {
47 | compressUrlCode('editor', store.code)
48 | }, 1000)
49 | })
50 |
51 | store.$on('theme', () => {
52 | editor.updateOptions({ theme: store.theme === 'dark' ? 'vs-dark' : 'vs' })
53 | })
54 | })
55 |
56 | return el
57 | }
58 |
--------------------------------------------------------------------------------
/src/compressors.ts:
--------------------------------------------------------------------------------
1 | import store from './store'
2 | import { watch } from '@arrow-js/core'
3 | import { minify } from 'terser'
4 | import { transform } from 'sucrase'
5 | import { gzip } from 'pako'
6 | import brotliInit from 'brotli-wasm'
7 |
8 | let nonce: number = 0
9 | watch(
10 | async function compress(): Promise<
11 | [
12 | results: {
13 | min: number
14 | gzip: number
15 | brotli: number
16 | },
17 | nonce: number
18 | ]
19 | > {
20 | const results = { min: 0, gzip: 0, brotli: 0 }
21 | let code = store.code
22 | const localNonce = ++nonce
23 | try {
24 | code = transform(code, { transforms: ['typescript'] }).code
25 | } catch (error) {
26 | // squelch
27 | }
28 | const promises: Promise[] = []
29 | if (store.useMinify) {
30 | promises.push(
31 | minify(code)
32 | .then((result) => {
33 | if (typeof result.code === 'string') {
34 | code = result.code
35 | results.min = code.length
36 | }
37 | })
38 | .catch(() => {
39 | // squelch
40 | })
41 | )
42 | }
43 |
44 | if (store.useGzip) {
45 | function runGzip() {
46 | const compressed = gzip(code)
47 | if (compressed) {
48 | results.gzip = compressed.length
49 | }
50 | }
51 | if (promises.length === 1) {
52 | promises.push(promises[0].then(runGzip))
53 | } else {
54 | runGzip()
55 | }
56 | }
57 |
58 | if (store.useBrotli) {
59 | promises.push(
60 | Promise.all(promises)
61 | .then(() => brotliInit)
62 | .then((brotli) => {
63 | const textEncoder = new TextEncoder()
64 | const compressed = brotli.compress(textEncoder.encode(code))
65 | results.brotli = compressed.length
66 | })
67 | )
68 | }
69 | return Promise.all(promises).then(() => [results, localNonce])
70 | },
71 | async (willBeResults) => {
72 | const [results, localNonce] = await willBeResults
73 | if (localNonce === nonce) {
74 | Object.assign(store, results)
75 | }
76 | }
77 | )
78 |
--------------------------------------------------------------------------------
/src/themeToggle.ts:
--------------------------------------------------------------------------------
1 | import store from './store'
2 | import { html } from '@arrow-js/core'
3 |
4 | export default function () {
5 | // get theme from locolStorage or use system theme
6 | document.documentElement.setAttribute('data-theme', store.theme)
7 |
8 | store.$on('theme', () => {
9 | document.documentElement.setAttribute('data-theme', store.theme)
10 | localStorage.setItem('theme', store.theme)
11 | })
12 |
13 | return html`
14 |
20 | ${() => {
21 | if (store.theme === 'light') {
22 | return html`
23 |
33 | `
34 | } else {
35 | return html`
36 |
46 | `
47 | }
48 | }}
49 |
50 | `
51 | }
52 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.css'
2 | import { html } from '@arrow-js/core'
3 | import editor from './editor'
4 | import results from './results'
5 | import themeToggle from './themeToggle'
6 | import './compressors'
7 | import pin from './pin'
8 | import options from './options'
9 |
10 | // add gitub star button after component loads
11 | setTimeout(() => {
12 | const script = document.createElement('script')
13 | script.src = 'https://buttons.github.io/buttons.js'
14 | document.head.appendChild(script)
15 | }, 100)
16 |
17 | html`
18 |
19 |
20 |
26 | min-gzip
27 |
28 |
by ArrowJS
29 |
30 |
40 |
42 |
52 | ${await editor()}
53 |
54 |
55 |
59 | `(document.getElementById('app')!)
60 |
--------------------------------------------------------------------------------
/src/options.ts:
--------------------------------------------------------------------------------
1 | import store from './store'
2 | import { html, reactive, watch } from '@arrow-js/core'
3 |
4 | export default function options() {
5 | const data = reactive({
6 | showOptions: false,
7 | })
8 |
9 | const clickAway = (e: MouseEvent) => {
10 | if (e.target instanceof HTMLElement && !e.target.closest('.option-list')) {
11 | data.showOptions = false
12 | }
13 | }
14 |
15 | watch(() => {
16 | if (data.showOptions) {
17 | document.addEventListener('click', clickAway)
18 | } else {
19 | document.removeEventListener('click', clickAway)
20 | }
21 | })
22 |
23 | const setOption = (option: string) => (e: InputEvent) => {
24 | store[option] = (e.target as HTMLInputElement).checked
25 | }
26 |
27 | return html`
28 |
29 |
55 |
87 |