faucet-pipeline

Jede Web-Anwendung muss einen ganzen Haufen Assets – also JavaScript, CSS, Bilder und Fonts – ausliefern. Aber wie sorgt man dafür, dass diese Dateien optimal ausgeliefert werden? Lucas beschäftigt sich seit Längerem mit diesem Thema im Rahmen des Open-Source-Projekts faucet-pipeline. In dem Talk erläutert er Themen wie Dateigröße, Bundling und Caching – und wie faucet dabei hilft.

Transcript

1. 2 0 2 0 / 0 8 / 2 6 I N N O Q T e c h n o l o g y L u n c h faucet-pipeline LUCAS DOHMEN @moonbeamlabs
2. Types of Assets • JavaScript • CSS • Images • Fonts • (Audio) • (Videos)
3. file size caching cascading requests transformation
4. Lucas Dohmen Senior Consultant
5. Photo by Markus Winkler on Unsplash It was the year 2016… fejo.dk asked me to solve those four problems yet again
6. Photo by Markus Winkler on Unsplash Rails features an asset pipeline …but it did not meet the requirements
7. Photo by Markus Winkler on Unsplash They allowed me to do release it as Open-Source In 2017, FND joined me as co-lead of the project
8. file size
9. Photographic Image Original: JPEG 192kb Compressed: WebP 36kb (81% smaller) Reduce color palette (25 colors, Quality 35%) 1920×1280 px WebP (not the actual image, Keynote can’t display WebP)
10. Photographic Image Original: JPEG 192kb Compressed: JPEG 33kb (83% smaller) Reduce color palette (25 colors, Quality 35%) 1920×1280 px mozJPEG
11. Image Compression is complicated WebP is not always smaller than a well compressed JPEG Compression differs from image to image To really reduce the file size, you need to compare the images AV1 Image File Format (AVIF) promises to be yet another leap forward Resizing is an essential step for good file sizes PNG, JPEG, WebP, SVG are all good formats with the right compressor (GIF, TIFF and BMP aren’t)
12. Lossless Text Compression 778kb of HTML → 46kb with Brotli 170kb of JavaScript → 38kb with Brotli 126kb of CSS → 20kb with Brotli 18kb of SVG → 8kb with Brotli 27kb of Font (TTF) → 14kb with woff2 (also Brotli)
13. Lossy Text Compression (Minify) This can be done for HTML, CSS and JavaScript There are different operations: - Reduce whitespace & Remove Comments - Mangle identifiers - Transformation of code to a shorter form
14. Is it worth it? Operations Uncompressed GZIP Brotli Nothing 281 83 69 Reduce Whitespace & Remove Comments 140 40 34 + Mangle 93 32 29 + Transform 89 31 28 (file size in kb)
15. Dead Code Elimination import { foo } from "external-library"; Only the parts used in foo should be included in the delivered JS (Tree Shaking)
16. Recommendations CSS & JavaScript: Reduce Whitespace, Strip Comments, Eliminate Dead Code Use Brotli Fonts: Use woff2 Images: PNG, JPEG, WebP and SVG with good compressors Size your images correctly
17. file size transformation
18. “Transpilation” Compile from one higher-level language to another one SCSS: Adds extra features to CSS TypeScript: Adds static types to JavaScript JSX: Embedded templating language for JavaScript TSX: TypeScript + JSX
19. Support older browsers JavaScript: Transform modern JavaScript features to older variants (Babel, Sucrase) CSS: Add Browser prefixes to CSS rules (Autoprefixer)
20. file size caching transformation
22. Cache your assets But how long? Cache-Control: max-age=<seconds>
23. hash of the content
24. Cache your assets But how long? Forever! With cache busting/hashing Cache-Control: max-age=<seconds> Cache-Control: immutable
25. Fonts, Images JavaScript HTML CSS Some assets might reference others… …so they need to be able to look up the hashed name
26. file size caching cascading requests transformation
27. Asset Bundling HTML JS JS CSS JS JS JS CSS CSS HTML JS JS CSS t
28. Asset Bundling & Code Splitting HTML JS JS CSS JS JS JS CSS CSS HTML CSS JS JS JS t
30. Addresses (almost*) all of these problems Open-Source Did we implement all of that ourselves? file size caching cascading requests transformation * Code splitting is WIP, a better image pipeline in beta
31. Photo by Thomas Marban on Unsplash お任せ (Omakase)
32. Omakase We choose the tools we deem best at the moment Those choices can change But you don’t need to do anything apart from updating faucet
33. npm install --save\ faucet-pipeline-js\ faucet-pipeline-sass\ faucet-pipeline-static Step 1 Step 2 Step 3 npx faucet npx faucet --watch
34. hash of the content ⇒ manifest file (Plugins available for Express, Spring, Rails)
35. faucet-pipeline.org
36. Danke! Fragen? Lucas Dohmen lucas.dohmen@innoq.com @moonbeamlabs Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0 Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com