# Lazy loading React components with loadable components [Week 37/20 in Review] *If you like my [articles](https://blog.natterstefan.me/), you probably like my [tweets](https://twitter.com/natterstefan) and [newsletter](https://newsletter.natterstefan.me/) too. Let's connect on [LinkedIn](http://www.linkedin.com/in/natterstefan). 🚀* --- Hello 👋🏻. Welcome to my "Week in Review" series. Each week I will share what I discovered, learned, and tested with you. Let's take a look at what I got this week. As mentioned in my last review, this one and also the next one is shorter. Afterward, you can find my Week in Review here again in the usual length and scope. If you have tools you would like me to test, please let me know. I would be glad to hear from you. Until then I hope you enjoy reading. --- ## loadable-components ![loadable-components](https://cdn.hashnode.com/res/hashnode/image/upload/v1600197257234/XoTDwEzd9.gif) This topic alone would be worth a blog post of its own. But for today I'll leave it to make you curious and share a link with more examples and docs. It has never been more important than today to optimize the speed and size of your website, especially on mobile devices. Getting a top [Google Lighthouse Index score](https://developers.google.com/web/tools/lighthouse?utm_campaign=natterstefan.me) is very important for [SEO](https://moz.com/learn/seo/what-is-seo?utm_campaign=natterstefan.me). A lot can be achieved with Lazy Loading Images, Responsive Images, CDNs, Caching, Minification, and Uglification. But at some point, you come to the point where you have to take care that the JavaScript bundle is made even smaller. For example, you can make sure that [for each route (start page, imprint, ...) only those components are loaded that are actually used](https://css-tricks.com/using-react-loadable-for-code-splitting-by-components-and-routes/?utm_campaign=natterstefan.me). Or that components are only loaded when they are actually seen on the page (e.g. an image gallery). And this is relatively easy thanks to [loadable-components](https://loadable-components.com/?utm_campaign=natterstefan.me). Do you want to know more about it? Do you want to know how it works with server-side rendering? I got you covered. I have created (actually [forked](https://github.com/gregberge/loadable-components/tree/8d29fef8f02e5b0cdd4a1add3399e48089a7b97a/examples/server-side-rendering)) an [example app (template repository)](https://github.com/natterstefan/loadable-components-example?utm_campaign=natterstefan.me) with code splitting, lazy loading components per route, and TypeScript. There were some "aha" moments when I looked at the official SSR example and bundling docs (with Webpack). A few details were not well documented in my opinion. For this reason, I link some of my learnings here. Hopefully, this makes it easier for you to get started. - [babel.config.js](https://github.com/natterstefan/loadable-components-example/blob/5e2a048b3480be41b740e3a0c3ae75cea9219674/babel.config.js#L42-L53): add `@loadable/babel-plugin` - [tsconfig.json](https://github.com/natterstefan/loadable-components-example/blob/5e2a048b3480be41b740e3a0c3ae75cea9219674/tsconfig.json#L4-L10): When you use both `babel-loader` and `ts-loader` ensure that `module` is set to `esnext`! It took me quite some time to figure that out. - webpack.config.js: `ts-loader` needs to be properly configured with a custom [´getCustomTransformers`](https://github.com/natterstefan/loadable-components-example/blob/5e2a048b3480be41b740e3a0c3ae75cea9219674/webpack.config.js#L64-L71). You also need to add [LoadablePlugin](https://github.com/natterstefan/loadable-components-example/blob/5e2a048b3480be41b740e3a0c3ae75cea9219674/webpack.config.js#L77) to the plugins. - `webpack.server.js`: If you bundle the server app, make sure the [libraryTarget is set to commonjs2](https://github.com/natterstefan/loadable-components-example/blob/master/webpack.server.js#L19-L25) _and_ [@loadable/component is excluded](https://github.com/natterstefan/loadable-components-example/blob/5e2a048b3480be41b740e3a0c3ae75cea9219674/webpack.server.js#L26-L38) from the bundle. If you have more questions, let me know on [Twitter](https://twitter.com/natterstefan). ### Links - [github.com/natterstefan/loadable-components-example](https://github.com/natterstefan/loadable-components-example) - [loadable-components vs. react-loadable](https://loadable-components.com/docs/loadable-vs-react-lazy/#note-about-react-loadable) - [github.com/jamiebuilds/react-loadable](https://github.com/jamiebuilds/react-loadable) ## 📗 Books I paused reading ["We Are All Leaders: Leadership is not a position, it's a mindset" by Fredrik Arnander](https://amzn.to/3kRLadF) and finished ["Ego is the Enemy" by Ryan Holiday](https://amzn.to/2FIt2mw) instead. It is an exciting book about the influence of the ego on our success, our environment, and how we can and should deal with it. Have you read it too? *What are you reading? Share your recommendations in the comments below. 🙏🏻* ## ⛓ Links of the Week - [web.dev/vitals](https://web.dev/vitals/?utm_campaign=natterstefan.me) - Essential metrics for a healthy site - Get to know why you should [stop using pixels in CSS](https://h.daily-dev-tips.com/stop-using-pixels-in-css?utm_campaign=natterstefan.me) - Delay a promise a minimum amount of time with [p-min-delay](https://github.com/sindresorhus/p-min-delay) - Simple timeouts for promises with [promise-timeout](https://github.com/building5/promise-timeout) - [lazysizes](https://github.com/aFarkas/lazysizes) - "*High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.*" (read more about it in the [web.dev docs](https://web.dev/codelab-use-lazysizes-to-lazyload-images/?utm_campaign=natterstefan.me)) - How to make fixed-bottom menus usable again - even on Safari with [react-fixed-bottom](https://medium.com/turo-engineering/react-stick-to-bottom-accessible-safari-fixed-bottom-elements-9ed761fbeecb?utm_campaign=natterstefan.me) - Learn [how to use React Transition Group to implement smooth transitions in your app ](https://blog.bitsrc.io/how-to-implement-smooth-transitions-in-react-bd0497b06b8?utm). - [Setting up a Lerna monorepo](https://medium.com/javascript-in-plain-english/javascript-monorepo-with-lerna-5729d6242302) can look cumbersome at first, but actually it is pretty straightforward. - [react-query](https://github.com/tannerlinsley/react-query?utm_campaign=natterstefan.me) provides hooks for fetching, caching, and updating asynchronous data in React! - Did you ever want to know [how to morph a SVG with react-spring](https://css-tricks.com/morphing-svg-with-react-spring/?utm_campaign=natterstefan.me)? This is it for week 37/2020. See you next week - thank you. 👋🏻 Stefan %%[newsletter-form] --- *If you like this article, chances are you will like my [newsletter](https://newsletter.natterstefan.me/) too. 🚀* Let's stay connected on [*Twitter*](https://twitter.com/natterstefan), [*LinkedIn*](http://www.linkedin.com/in/natterstefan), and [*GitHub*](https://github.com/natterstefan). *You can [buy me a coffee](https://www.buymeacoffee.com/natterstefan) or support my work on [Patreon](https://www.patreon.com/natterstefan) too if you want.* --- *This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.*