Tree shaking is a technique to remove unused code from bundles to reduce file size. It analyzes import and export statements to determine unused code, which can then be excluded from the bundle. CSS frameworks like Bootstrap often include unused code by default that tree shaking tools can remove to minimize file size. Tools like UnCSS analyze CSS usage on a page to remove unused styles, but have limitations and an easier alternative is to only import needed components from frameworks during the build process.
4. • What is tree shaking?
• What is the benefit?
• Are you a tree shaker?
5. How CSS goes IRL...
•Add something like Bootstrap (Maybe
with NPM)
•Use some bits of it
•Write copy-paste some CSS
6. Maybe you get fancy
•Custom Bootstrap generation
•Some Framework specific
implementation (Reactstrap)
•Add a Sass or Less build pipeline
7. Worst case
•Start dropping combinations of
frameworks
•Can I use Bootstrap with Material with...
•Not knowing what CSS CDN imports are
doing
8. A good process
•Start with CDN if you don't have a starter
project
•As you move towards production and
testing create a build process
•KISS
9. Some good tools
•Gulp.js (or Grunt) Autoprefixer
•Sass and node-sass
•Start build buliding a single file
10. MYTH! CSS Framework Bloat
•Most modern projects are modular by
nature: ZURB Foundation, Bootstrap, etc.
•These options are turned off by default
•If you use customize Bootstrap you are
already doing this
11. Just a tool not a process
•Take what you want, leave the rest
•Good examples of large project
architecture
•Are the largest and most widely used
Design Systems in the world
12. Whats the situation
wget https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
du -hs bootstrap.min.css
144K bootstrap.min.css
npm install bootstrap
du -hs node_modules/bootstrap/dist/css/bootstrap.min.css
140K node_modules/bootstrap/dist/css/
bootstrap.min.css
19. Except...
UnCSS only runs the Javascript that is run
on page load. It does not (and cannot)
handle Javascript that runs on user
interactions like button clicks. 2
2
source: https://www.npmjs.com/package/uncss
20. Except (Cont.)...
You must use the ignore option to
preserve classes that are added by
Javascript on user interaction. 2
2
source: https://www.npmjs.com/package/uncss