An app built with various common react tech: react-intl, react-router-dom, flexbox, redux hooks, typescript, setup with a particular folder structure, code splitted by webpack and React.lazy() etc.
nvm use
yarn
yarn start
Open http://localhost:3000 to view it in the browser.
hot reloads
yarn test
Launches the test runner in the interactive watch mode.\
yarn build
Builds the app for production to the build folder.\
This is a bootstrapped create react app so all the usual applies with that
Scaffolded as a create-react-app which uses react-scripts webpack config which is already configured with "chunkFilename" property.
chunkFilename: isEnvProduction ? 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js',
I use React.lazy() to load the PokemonPowerRankings component:
const PokemonPowerRankings = React.lazy(() => import(/* webpackChunkName: "PokemonPowerRankings" */ './components/pokemon/PokemonPowerRankings'));
Lastly wrap React.lazy() components in React.Suspense
The behavior of this code splitting is:
- at build time the PokemonPowerRankings component (css & js)is bundled as a separate component names based on chunkFileName property (yarn build will create the code bundles in /build/static)
- at runtime the PokemonPowerRankings component is loaded on demand when the user navigates to that route
See more in webpack docs