https://github.com/jchavarri/reason-react-lazy-loading
Example project to show how to use components lazy loading in ReasonReact
https://github.com/jchavarri/reason-react-lazy-loading
bucklescript lazy-loading react reason-react reasonml
Last synced: 12 months ago
JSON representation
Example project to show how to use components lazy loading in ReasonReact
- Host: GitHub
- URL: https://github.com/jchavarri/reason-react-lazy-loading
- Owner: jchavarri
- License: mit
- Created: 2019-05-12T16:32:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:22:33.000Z (over 3 years ago)
- Last Synced: 2025-02-28T01:17:46.771Z (about 1 year ago)
- Topics: bucklescript, lazy-loading, react, reason-react, reasonml
- Language: Reason
- Homepage:
- Size: 1.58 MB
- Stars: 42
- Watchers: 2
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reason-react-lazy-loading
Example project to show how to use components lazy loading in ReasonReact.
Reason / BuckleScript adaptation from https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58.
## Run Project
```sh
yarn install
yarn start
# in another tab
yarn run webpack
```
After you see the webpack compilation succeed (the `yarn run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
## Run Project with Server
To run with the webpack development server run `yarn run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 yarn run server`).
## Build for Production
```sh
yarn run clean
yarn run build
yarn run webpack:production
```
This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.