Bundle Splitting in Volto
- 1. Bundle Splitting in Volto Nilesh Gulia - Developer @Eau De Web Twitter: @nileshg89
- 2. What is Bundle splitting? Bundle splitting is a way to create separate bundles/chunks for your code when we need them on demand. This is also known as code splitting. We do have webpack which bundles our code into a single js static file.
- 4. The Idea?
- 5. ➔ Manually split code using webpack configuration ( not recommended ). ➔ Using splitChunks plugin. It uses internal rules while spitting chunks and removes duplicated dependencies. ➔ Dynamic import or lazy-load. Ways to split bundle
- 6. Webpack Prefetch/Preload Prefetch: fetch the resource available which are needed in future pages/navigation. Preload: load the resources which are needed in the current page/navigation. They results in <link/> tag creation in the html file, something like: <link rel="prefetch/preload" href="chunk-name.js">
- 7. Dynamic Import ➔ Import a module on demand. Returns a Promise. ➔ To lazy load modules, React supports React.lazy ➔ React.lazy only to be used with <Suspense> and cannot support SSR
- 8. Loadable components to Rescue! ➔ API structure similar to React.lazy ➔ Supports dynamic variables names in import statements. ➔ Support SSR out of the box. ➔ Extract chunks on server and pass it to context of your app with extractManager.
- 9. Lets try to lazy load an external lib in Volto!
- 10. Lazy load react-dropzone Chunk size before:
- 11. Plugins
- 12. Just add dynamic import: import loadable from '@loadable/component' const Moment = loadable(() => import('react-dropzone')) Loadable returns a dynamic import and when webpack come across this syntax, its start component splitting...
- 15. Analyse bundle-size: -> Webpack bundle analyzer: https://github.com/webpack-contrib/webpack-bundle-analyzer/ -> bundlephobia: https://bundlephobia.com/ -> bundlesize: https://github.com/siddharthkp/bundlesize