Compile Like It's 2017

on YouTube ↗27m

" summary

Shows concrete build strategies for modern JavaScript: use Babel presets with targets via browserslist and a polyfill importer that injects only needed polyfills, and use a CSS-in-JS compile-time plugin to move work from runtime to build. Demonstrates runtime tooling (an animated algorithm viewer and dynamic assignment tracker) and gives measurements: compiling 1,000 consts ~5–6s, example bundles reduced from ~500KB to ~35KB with helpers ~2KB, and modern Chrome/Safari require few or no transforms.

AI-written summary · about

" chapters (18)

1. 0:00Introduction
2. 2:30Babel's origin
3. 4:37Babel plugins
4. 5:41Babel algorithm
5. 7:30Dynamic code analysis
6. 8:54Debugging with Babel
7. 9:38CSS-in-JS optimization
8. 11:27Babel presets
9. 13:58Modern browsers
10. 14:39Babel-preset-env
11. 16:47compat-table plugin
12. 17:52engine field in package.json
13. 19:17Babel and Gulp
14. 20:23Dev vs prod config
15. 21:46Babel bundle size
16. 23:52Babel-preset-env polyfills
17. 24:57Switch to preset-env
18. 25:44Q&A

" related talks

• 34mBuild-time Optimizations in JavaScript ApplicationsEvan You · ReactiveConf 2017
• 22mBuilding JavaScript for JavaScriptersCassidy Williams · DinosaurJS 2019
• 11mJavascript Tooling - The Evolution and Future of JS & Front-end Build ToolsShedrack Akintayo · JSNation Live 2020
• 32mBuilding a High Performance JavaScript CompilerHongbo Zhang · Reason Conf US 2019
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018
• 23mParty like it's 1999, write JavaScript like it's 2012Tony Milne · Web Directions Code 2012
• 35mAshley Williams - SeattleJS Conference 2017Ashley Williams · SeattleJS Conference 2017
• 15mCompilers in styling web UIRyan Tsao · dotCSS 2017