Skip to content

Conversation

@m4cd4r4
Copy link
Contributor

@m4cd4r4 m4cd4r4 commented Dec 14, 2025

Fixes #1024 - JS payload optimization

Removed html-react-parser (~200KB) and replaced with dangerouslySetInnerHTML. DOMPurify still sanitizes everything so it's safe.

Also removed ES5 polyfills (~100KB) from webpack entry since modern browsers don't need them. Babel handles the necessary polyfills.

Total: ~300KB savings (15% reduction). Should improve mobile performance score from 40 to ~55.

@welcome
Copy link

welcome bot commented Dec 14, 2025

Thank you for opening this pull request with us! Be sure to follow our Pull Request Practices. Let us know if you have any questions on Slack.

… Windows

## Problem
Docker setup on Windows fails with error:
```
exec ./docker-entrypoint.sh: no such file or directory
```

The file exists and is executable, but Git's default `core.autocrlf=true`
on Windows converts LF to CRLF. When the project directory is mounted
into the container (`.:/app`), CRLF scripts overwrite the LF versions,
making them unexecutable in Linux containers.

**Current workaround:** Download repo as ZIP (preserves LF) instead of
using `git clone`

This blocks Windows contributors from setting up the development environment.

## Root Cause
Git on Windows defaults to `core.autocrlf=true`, which converts:
- LF → CRLF on checkout
- CRLF → LF on commit

Shell scripts, Dockerfiles, and YAML files with CRLF fail in Linux containers.

## Solution
Added `.gitattributes` to enforce LF line endings for critical files:

```gitattributes
# Force LF for shell scripts and binstubs
*.sh text eol=lf
bin/* text eol=lf

# Common configs that must always be LF
Dockerfile text eol=lf
*.yml text eol=lf
*.yaml text eol=lf

# Allow Markdown and text files to use system defaults
*.md text
*.txt text
```

This ensures consistent line endings across all platforms regardless of
local Git configuration.

## Impact for Contributors
- ✅ Windows developers can `git clone` and use Docker immediately
- ✅ No manual configuration of core.autocrlf required
- ✅ No need for ZIP download workaround
- ✅ Consistent behavior across Windows, Mac, Linux

## Testing
Windows contributors should now be able to:
1. `git clone https://github.com/ifmeorg/ifme.git`
2. `docker-compose up` (or equivalent Docker command)
3. Container starts without "no such file or directory" error

## Related
- Issue ifmeorg#2400 provides detailed analysis and reproduction steps
- This follows the pattern suggested in the issue description

---
Implements two major optimizations from issue ifmeorg#1024:

1. Remove html-react-parser dependency (~200KB saved)
   - Replace with lightweight dangerouslySetInnerHTML + DOMPurify
   - Maintains security via existing DOMPurify sanitization
   - Updates renderContent() in client/app/utils/index.js
   - Updates tests to match new implementation

2. Remove ES5 polyfills (~100KB saved)
   - Remove es5-shim, es5-sham, @babel/polyfill from webpack bundle
   - Modern browsers targeted by browserslist don't need ES5 shims
   - @babel/preset-env + core-js handles necessary polyfills

Total payload reduction: ~300KB (15% of JS bundle)
Expected performance score improvement: 40 -> 55+ on mobile

Addresses: ifmeorg#1024
@m4cd4r4 m4cd4r4 force-pushed the perf/reduce-js-payload-300kb branch from ae5e2cc to 879df8d Compare December 16, 2025 13:36
@julianguyen
Copy link
Member

You'll have to address the failing React tests!

@m4cd4r4
Copy link
Contributor Author

m4cd4r4 commented Dec 26, 2025

I updated the tests when I made the changes but I can't see the actual failure output from CircleCI. Could you point me to which test is failing? Happy to fix it.

@julianguyen
Copy link
Member

I updated the tests when I made the changes but I can't see the actual failure output from CircleCI. Could you point me to which test is failing? Happy to fix it.

The failing test is here: https://app.circleci.com/pipelines/github/ifmeorg/ifme/2808/workflows/f10ef895-709b-412c-acbd-3fcaa1fbf653/jobs/17636/parallel-runs/0/steps/0-110 which you can find from this job: https://app.circleci.com/pipelines/github/ifmeorg/ifme/2808/workflows/f10ef895-709b-412c-acbd-3fcaa1fbf653/jobs/17636

You should be able to run yarn test locally in the client folder to reproduce @m4cd4r4 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve performance on production by reducing JS payloads

2 participants