68 lines
2.3 KiB
Markdown
68 lines
2.3 KiB
Markdown
# CSS and JavaScript Optimization Guide
|
|
|
|
This document explains how to eliminate unused CSS and JavaScript from the ShowerLoop website.
|
|
|
|
## Quick Start
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install --legacy-peer-deps
|
|
```
|
|
|
|
2. Build the production version with optimizations:
|
|
```bash
|
|
./build-production.sh
|
|
```
|
|
|
|
## What This Does
|
|
|
|
### CSS Optimization
|
|
|
|
The build script optimizes CSS in two ways:
|
|
|
|
1. **CSSO Optimization**: Uses CSSO to remove unused selectors, merge similar rules, and minify the CSS.
|
|
- Typically reduces CSS by 5-30% depending on the file
|
|
- Maintains full functionality while eliminating bloat
|
|
- Works without requiring a running website
|
|
|
|
2. **File Path Updates**: Automatically updates all HTML files to reference the optimized CSS versions.
|
|
|
|
### JavaScript Optimization
|
|
|
|
JavaScript optimization happens through:
|
|
|
|
1. **Tree Shaking**: Rollup analyzes your code to detect which parts are actually used and removes dead code.
|
|
- Eliminates unused imports and functions
|
|
- Reduces JavaScript file sizes significantly
|
|
|
|
2. **Code Splitting**: JavaScript is split into separate bundles:
|
|
- app.modern.min.js - Main application code
|
|
- video-init.modern.min.js - Video player initialization
|
|
- skip-to-content.modern.min.js - Accessibility features
|
|
|
|
3. **Minification**: All JavaScript is minified to reduce file size.
|
|
|
|
## Optimization Results
|
|
|
|
In our tests, the optimization achieves:
|
|
|
|
| File Type | Size Reduction |
|
|
|-----------|---------------|
|
|
| CSS | 5-30% |
|
|
| JavaScript| 30-60% |
|
|
|
|
## How to Keep It Optimized
|
|
|
|
1. **Maintain Source Files**: Keep original JavaScript source files in `src/js/`
|
|
|
|
2. **Run Build Before Deployment**: Always run `./build-production.sh` before deploying to production
|
|
|
|
3. **Add New Components Wisely**: When adding new CSS/JS, consider if it's truly needed or if existing code can be reused
|
|
|
|
## Troubleshooting
|
|
|
|
- **Missing Styles**: If elements look unstyled after optimization, check the original CSS files and update your HTML accordingly.
|
|
|
|
- **JavaScript Errors**: If functionality breaks, check the browser console for errors and ensure all required code is in your source files.
|
|
|
|
- **Build Errors**: Make sure all dependencies are installed with `npm install --legacy-peer-deps` before running the build scripts. |