A React example project to demonstrate how to achieve code splitting plus css modules.
- Implement React code splitting
- Implement Css modules
- Use Postcss Cssnext
- Build all this features
With all this features we able to load associated Scripts and Styles on demand 🖖🚀🙃.
Install
npm install
Build
npm run build-dev
Run
npm run serve
This project implements the minimal requirement to demonstrate its purpose.
- TypeScript v2.8
Client
- React v16.3
- React Css Modules v3
- React Loadable v5
Server
- Http-server v0.10
Build tools
- Webpack v4
- PostCss
- Babel v6
Source code is under source folder.
Client code is built into client folder.
The application is built through Webpack.
TypeScript type check and emit JavaScript es2015 (TypeScript without types) consumable by Babel.
babel-preset-react transform React jsx and babel-preset-env es2015 syntax into code understandable by the browser.
babel-plugin-react-css-modules transform styleName attribute into className React attribute and resolve dynamic class name at runtime.
postcss-cssnext transform new css syntax into css understable today by the browser.
postcss-import transform @import rules by inlining content, useful for shared variables.
css-loader import css files and generate scoped class names regarding localIdentName option.
mini-css-extract-plugin extract transformed Css into dedicated Css bundles.
This sample project was made according to these documentations.
Css Modules
Code Splitting