react-loadable-component-with-continuous-deployment
React @loadable/component with Continuous Deployment.
See the explanation post for more info at https://dev.to/aleixmorgadas/react-loadable-component-with-continuous-deployment-5ep3
Project Docs
Decisions
- It's a Single-Page Application
- We need @loadable/component library to reduce the application first loading size
- We don't want to store the previous artifacts (js & css) between deployments to keep old versions working
- We want Continuous Deployment
Problem
Let's try do build the project twice changing a little a file:
Build 1
Build 2
As you see, some file names changed as they contain the checksum in the name to verify that the content has changed.
See example video of the behavior
Solution
Wrap the Router file with a ErrorBoundary
component that caches the 'ChunkLoadError'
thrown by @loadable/component
and asks the user to reload the page.
You add this ErrorBoundary file to your project, and then you wrap the <Router>...</Router>
Component with it. See example here
See example of the correct behavior
License
Copyright (c) 2021 Aleix Morgadas Licensed under the MIT License