maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a comment about the state of code-splitting

Browse source
This commit is contained in:
Vesa Luusua 2018-10-08 16:28:21 +03:00
parent 4137c80a2e
commit f3b565bed5
1 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
docs/improving-performance.md
View file

@ -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.