├── .gitignore ├── src ├── main.js └── App.html ├── public ├── worker.js ├── index.html └── global.css ├── README.md ├── package.json └── rollup.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/bundle.* 4 | package-lock.json 5 | yarn.lock -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.html'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /public/worker.js: -------------------------------------------------------------------------------- 1 | importScripts('https://unpkg.com/terser'); 2 | 3 | self.postMessage({ ready: true }); 4 | 5 | self.addEventListener('message', event => { 6 | const result = Terser.minify(event.data.input, { 7 | // TODO support options 8 | }); 9 | 10 | self.postMessage(result); 11 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # terser playground 2 | 3 | A very incomplete playground for seeing how [Terser](https://github.com/terser-js/terser/) minifies JavaScript. 4 | 5 | TODO: 6 | 7 | * use CodeMirror or something instead of a plain textarea 8 | * support options 9 | * highlight error locations 10 | * use sourcemaps to link a given chunk of input to its corresponding output 11 | * permalinks -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Terser playground 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Terser playground

16 | 17 | 21 |
22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "terser-playground", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "gzip-js": "^0.3.2", 6 | "npm-run-all": "^4.1.3", 7 | "rollup": "^0.66.2", 8 | "rollup-plugin-commonjs": "^9.1.8", 9 | "rollup-plugin-node-resolve": "^3.4.0", 10 | "rollup-plugin-svelte": "^4.3.1", 11 | "rollup-plugin-terser": "^3.0.0", 12 | "sirv-cli": "^0.2.2", 13 | "svelte": "^3.0.0-alpha16" 14 | }, 15 | "scripts": { 16 | "build": "rollup -c", 17 | "autobuild": "rollup -c -w", 18 | "dev": "run-p start:dev autobuild", 19 | "start": "sirv public", 20 | "start:dev": "sirv public --dev" 21 | }, 22 | "dependencies": { 23 | "terser": "^3.11.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import { terser } from 'rollup-plugin-terser'; 5 | 6 | const production = !process.env.ROLLUP_WATCH; 7 | 8 | export default { 9 | input: 'src/main.js', 10 | output: { 11 | sourcemap: true, 12 | format: 'iife', 13 | name: 'app', 14 | file: 'public/bundle.js' 15 | }, 16 | plugins: [ 17 | svelte({ 18 | // opt in to v3 behaviour today 19 | skipIntroByDefault: true, 20 | nestedTransitions: true, 21 | 22 | // enable run-time checks when not in production 23 | dev: !production, 24 | // we'll extract any component CSS out into 25 | // a separate file — better for performance 26 | css: css => { 27 | css.write('public/bundle.css'); 28 | } 29 | }), 30 | 31 | // If you have external dependencies installed from 32 | // npm, you'll most likely need these plugins. In 33 | // some cases you'll need additional configuration — 34 | // consult the documentation for details: 35 | // https://github.com/rollup/rollup-plugin-commonjs 36 | resolve(), 37 | commonjs(), 38 | 39 | // If we're building for production (npm run build 40 | // instead of npm run dev), minify 41 | production && terser() 42 | ] 43 | }; 44 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | header { 18 | display: flex; 19 | margin: 1em 0 1em 0; 20 | align-items: baseline; 21 | } 22 | 23 | h1 { 24 | flex: 1; 25 | margin: 0; 26 | font-size: 24px; 27 | } 28 | 29 | a { 30 | color: rgb(0,100,200); 31 | text-decoration: none; 32 | } 33 | 34 | a:hover { 35 | text-decoration: underline; 36 | } 37 | 38 | a:visited { 39 | color: rgb(0,80,160); 40 | } 41 | 42 | label { 43 | display: block; 44 | } 45 | 46 | input, button, select, textarea { 47 | font-family: inherit; 48 | font-size: inherit; 49 | padding: 0.4em; 50 | margin: 0 0 0.5em 0; 51 | box-sizing: border-box; 52 | border: 1px solid #ccc; 53 | border-radius: 2px; 54 | } 55 | 56 | input:disabled { 57 | color: #ccc; 58 | } 59 | 60 | input[type="range"] { 61 | height: 0; 62 | } 63 | 64 | button { 65 | background-color: #f4f4f4; 66 | outline: none; 67 | } 68 | 69 | button:active { 70 | background-color: #ddd; 71 | } 72 | 73 | button:focus { 74 | border-color: #666; 75 | } -------------------------------------------------------------------------------- /src/App.html: -------------------------------------------------------------------------------- 1 | 52 | 53 | 79 | 80 |
81 | 82 | 83 |
{fmt(input.length / 1024)} KiB plain : {fmt(inputGzLen / 1024)} KiB gzipped
{error ? '' : `${fmt(output.length / 1024)} KiB plain : ${fmt(outputGzLen / 1024)} KiB gzipped`}
84 |
85 | --------------------------------------------------------------------------------