This PR adds some code splitting to reduce the amount of JS downloaded during the first visit. This way, d3 related assets will be loaded only when visiting /stats, lottie only during /success, etc.
Furthermore, the specific lodash.debounce is used to avoid including extra utilities not used from the lodash bundle.
npm run analyze is added to gather bundle statistics from the production build.
Before:
The main big chunk of code loaded was 2.20c3217b.chunk.js (1.5 MB ~ 400 kb gzipped)
After:
The chunk loaded during the home visit is 3.d02e32a0.chunk.js (273.14 KB) and additional chunks exist for all of our main routes containing their respective dependencies.
pA1nD
commented
4 years ago
This PR adds some code splitting to reduce the amount of JS downloaded during the first visit. This way, d3 related assets will be loaded only when visiting
/stats, lottie only during/success, etc.Furthermore, the specific
lodash.debounceis used to avoid including extra utilities not used from the lodash bundle.npm run analyzeis added to gather bundle statistics from the production build.Before:
The main big chunk of code loaded was
2.20c3217b.chunk.js(1.5 MB ~ 400 kb gzipped)After:
The chunk loaded during the home visit is
3.d02e32a0.chunk.js(273.14 KB) and additional chunks exist for all of our main routes containing their respective dependencies.