Nilesh Gulia, https://2020.ploneconf.org/speakers/nilesh-gulia As an application scales, we need to make adjustments in Javascript bundle which gives a breathing space when it comes to loading massive client apps. We cannot maintain a single javascript bundle as the application grows, it can hinder website performance in various cases. A few different approaches we can take when it comes to bundle splitting JavaScript. Dynamic code splitting: Dynamic code splitting adds the ability to point out the fields/components which we want to lazy-load i.e load on demand and split out in a separate bundle. This is opposite to statically load where we bundle out dependencies into a single file during build time. This talk demonstrates how we recently inculcated and leveraged `loadable-components` into Volto core to load dynamic chunks while maintaining server side rendering. https://2020.ploneconf.org/talks/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...

14. Decreased chunk size

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

16. Thank you!
Contribute:
Volto: https://github.com/plone/volto/issues