From f3b565bed59f9cb6b994443a97e77bf15ca7c32b Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Mon, 8 Oct 2018 16:28:21 +0300 Subject: [PATCH] Add a comment about the state of code-splitting --- docs/improving-performance.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/improving-performance.md b/docs/improving-performance.md index 1d23aa40..7f0816b5 100644 --- a/docs/improving-performance.md +++ b/docs/improving-performance.md @@ -27,6 +27,12 @@ Read more about We haven't yet implemented code splitting to reduce initial page rendering time, but there're other improvements that could be done to improve both cases of page rendering. +* [Check page performance](#check-page-performance) +* [Optimize image sizes](#optimize-image-sizes) +* [Lazy load off-screen images and other components](#lazy-load-off-screen-images-and-other-components) +* [Use sparse fields](#use-sparse-fields) +* [About code-splitting](#about-code-splitting) + ## Check page performance The first step is, of course, to start measuring performance. @@ -72,3 +78,21 @@ Another way to reduce the amount of data that is fetched from API is sparse fiel relatively new feature and Flex template app has not yet leveraged it fully, but it is created to reduce unnecessary data and speed up rendering. You can read more from [Flex API docs](https://flex-docs.sharetribe.com/#sparse-attributes). + +## About code-splitting + +We haven't yet implemented code-splitting to template app. Our current setup is creating one UMD +bundle file that is used on both client-side and server-side rendering (SSR). Unfortunately, Webpack +(a bundling tool used by `sharetribe-scripts` dependency) has +[a bug](https://github.com/webpack/webpack/issues/2471) that prevents using code-splitting. This +means that there need to be separate builds for browser and SSR for code-splitting to work. + +In practice, it is probably best to add another Webpack build configuration for the server in Create +React App (CRA) fork (`sharetribe-scripts` is a fork of CRA repo). That will also mean some +refactoring in `server/` folder as well as in `app.js` file. + +Furthermore, if you are considering code-splitting, you should also be aware that there might be a +problem with a "back" navigation button. (If the page loads asynchronously, a browser might not be +able to return the user to the correct scrolling position on the previous page.) We would also like +to be aware if users of the template app are considering code-splitting - if there's more demand for +this feature, we should prioritize it accordingly.