perf: Reduce JS payload by ~300KB (15% reduction)#2403
perf: Reduce JS payload by ~300KB (15% reduction)#2403m4cd4r4 wants to merge 1 commit intoifmeorg:mainfrom
Conversation
|
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. |
m4cd4r4
force-pushed
the
perf/reduce-js-payload-300kb
branch
from
ae5e2cc to
879df8d
Compare
|
You'll have to address the failing React tests! |
|
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 |
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
force-pushed
the
perf/reduce-js-payload-300kb
branch
from
879df8d to
275045a
Compare
|
Thanks @julianguyen - I looked into this. The 36 test failures are all I ran the tests for the files this PR touches directly: All 10 tests pass, including the updated |
2 participants
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.