├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── api ├── data │ └── images │ │ ├── ady-teenagerinro-sQ0xXxQdfeY-unsplash_qgefwh.jpg │ │ ├── arisa-chattasa-VbUNV9Ui7zk-unsplash_xmaen0.jpg │ │ ├── artem-beliaikin-zsam4a4cpq4-unsplash_z4r0hv.jpg │ │ ├── bin-jaleel-almanza-VKI8S_O-pYg-unsplash_xqqb9x.jpg │ │ ├── chuttersnap-CuLzFor2c4M-unsplash_auzamk.jpg │ │ ├── daniel-korpai-H0vKZjt2k1E-unsplash_f2hyzr.jpg │ │ ├── debby-hudson-STo4ziY5g7A-unsplash_g4xlkv.jpg │ │ ├── ehimetalor-akhere-unuabona-wa5z9o9fgjw-unsplash_id7ek3.jpg │ │ ├── ivan-bandura-EWVXMoIWlpA-unsplash_vjrubi.jpg │ │ ├── markus-winkler--1BAvfgHFK4-unsplash_xqb6ce.jpg │ │ ├── maxim-potkin-CWmtVAqtgRw-unsplash_aqlmov.jpg │ │ ├── oscar-nilsson-W-oqNwbmin0-unsplash_o1lbem.jpg │ │ ├── rahul-chakraborty-E_mHYosg98k-unsplash_hotcyh.jpg │ │ ├── riyan-ong-fLa1MkdnbV8-unsplash_ni7dyd.jpg │ │ ├── screen-post-vYxnwamt6HE-unsplash_zl3gji.jpg │ │ ├── sean-whelan-NG_a-z0ScM0-unsplash_itzjzs.jpg │ │ ├── selwyn-van-haaren-RfAADt_V2QU-unsplash_psga66.jpg │ │ └── tyler-casey-f5FyIQGNUcM-unsplash_l83vm5.jpg └── gadgets.json ├── app-screenshot.png ├── babel.config.js ├── global.d.ts ├── lighthouse-reports ├── stage-0-legacy-app.html ├── stage-0.png ├── stage-1-minification.html ├── stage-10-service-workers.html ├── stage-11-localstorage-offline.html ├── stage-11.png ├── stage-2-splitting-chunks.html ├── stage-3-compression-gzip.html ├── stage-4-http2.html ├── stage-5-modern-app.html ├── stage-6-next-gen-images.html ├── stage-7-lazy-load-images.html ├── stage-8-resized-images.html └── stage-9-additional-diagnostics.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── assets │ ├── favicon.png │ └── logo.png ├── scripts │ ├── app.tsx │ ├── components │ │ ├── footer │ │ │ ├── footer.module.scss │ │ │ └── footer.tsx │ │ ├── header │ │ │ ├── header.module.scss │ │ │ └── header.tsx │ │ ├── navigation │ │ │ ├── main-nav.module.scss │ │ │ └── main-nav.tsx │ │ ├── product-card │ │ │ ├── product-card.module.scss │ │ │ └── product-card.tsx │ │ ├── product-list │ │ │ ├── product-list.module.scss │ │ │ └── product-list.tsx │ │ └── router-switch │ │ │ └── router-switch.tsx │ ├── pages │ │ ├── category │ │ │ ├── category.module.scss │ │ │ └── category.tsx │ │ └── product │ │ │ └── product.tsx │ └── tools │ │ └── css.ts ├── styles │ └── styles.scss ├── templates │ └── template.html └── web-entry.tsx ├── tsconfig.json └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "ecmaVersion": 2020, 5 | "sourceType": "module" 6 | }, 7 | "extends": [ 8 | "plugin:@typescript-eslint/recommended", 9 | "prettier" 10 | ] 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | dist 4 | .vscode 5 | .history/ 6 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "none", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lightning Fast Loading 2 | This is a demo application to understand, visualize the effect of optimization techniques, whether they are in the code level, build time or in server setup. 3 | 4 | The app is starting from unoptimised, legacy code to modern PWA code. Each stage of changes are available as [branches](https://github.com/bcinarli/lightning-fast-loading/branches/all) to easily see the differences and code changes between the stages. The missing stage branches are the optimizations done in server level, so no code changes. 5 | 6 | ## Setup 7 | Application is using webpack as build tool with babel and interface is created with React. To reduce inference from framework optimization, a custom app setup is used instead of _create-react-app_ or _nextjs_ 8 | 9 | For rest api, [mockapi.io]() sample api end-point is created with 18 items. 10 | 11 | The images are downloaded from [unsplash.com](), and the name of the images and title of the _products_ in the grid view are the authors of those images. 12 | 13 | For the lighthouse testing, instead of development-tools lighthouse setup, lighthouse-cli is used in order to provide _sort of_ isolated environment and more reliable data. 14 | 15 | And finally, instead of webpack dev server, a two local Nginx servers created, on for the application itself and the other one is serving the images. 16 | 17 | ## Stages 18 | Stages as branches are different stages of the optimization throughout the process. 19 | 20 | ### Stage 0 21 | The initial application without any optimization. 22 | ![Stage 0 Lighthouse Report](https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/main/lighthouse-reports/stage-0.png?raw=true) 23 | 24 | ### Stage 1 25 | Minification added to webpack optimization 26 | 27 | ### Stage 2 28 | Split chunk definitions added to webpack optimization 29 | 30 | ### Stage 3 31 | _In Server_, gzip compression defined in Nginx server 32 | 33 | ### Stage 4 34 | _In Server_, ssl and http/2 protocol have activated in Nginx server 35 | 36 | ### Stage 5 37 | Application build changed to create modern only code, legacy is removed 38 | 39 | ### Stage 6 40 | Images converted to webp format, but the image dimensions kept same 41 | _In Server_, long term caching defined for the assets. e.g., 30 days for react and vendors frameworks, 7 days for app, 30 days for images etc. 42 | 43 | ### Stage 7 44 | Lazy loading added to images (stage 6 and stage 7 is together in stage 7 branch) 45 | 46 | ### Stage 8 47 | Images resized to serve with meaningful dimensions to where they are visible 48 | 49 | ### Stage 9 50 | Additional diagnostic refactoring added respectively lighthouse's opportunities suggestiongs 51 | 52 | ### Stage 10 53 | Service worker and manifest.json definitions are added. 54 | 55 | ### Stage 11 56 | To mimicing offline, localStorage usage for API fecthing added. (remarks: this has chosen due to simplicity of the test, for real world, a proper offline strategy and respective cache update / invalidation should be set.) 57 | ![100% Top score](https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/main/lighthouse-reports/stage-11.png) 58 | 59 | After final stage, the application has started to load almost immediately as less than 0.5 seconds. 60 | 61 | ![Lightning Fast Loading](https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/main/app-screenshot.png?raw-true "Lightning Fast Loading") 62 | -------------------------------------------------------------------------------- /api/data/images/ady-teenagerinro-sQ0xXxQdfeY-unsplash_qgefwh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/ady-teenagerinro-sQ0xXxQdfeY-unsplash_qgefwh.jpg -------------------------------------------------------------------------------- /api/data/images/arisa-chattasa-VbUNV9Ui7zk-unsplash_xmaen0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/arisa-chattasa-VbUNV9Ui7zk-unsplash_xmaen0.jpg -------------------------------------------------------------------------------- /api/data/images/artem-beliaikin-zsam4a4cpq4-unsplash_z4r0hv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/artem-beliaikin-zsam4a4cpq4-unsplash_z4r0hv.jpg -------------------------------------------------------------------------------- /api/data/images/bin-jaleel-almanza-VKI8S_O-pYg-unsplash_xqqb9x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/bin-jaleel-almanza-VKI8S_O-pYg-unsplash_xqqb9x.jpg -------------------------------------------------------------------------------- /api/data/images/chuttersnap-CuLzFor2c4M-unsplash_auzamk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/chuttersnap-CuLzFor2c4M-unsplash_auzamk.jpg -------------------------------------------------------------------------------- /api/data/images/daniel-korpai-H0vKZjt2k1E-unsplash_f2hyzr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/daniel-korpai-H0vKZjt2k1E-unsplash_f2hyzr.jpg -------------------------------------------------------------------------------- /api/data/images/debby-hudson-STo4ziY5g7A-unsplash_g4xlkv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/debby-hudson-STo4ziY5g7A-unsplash_g4xlkv.jpg -------------------------------------------------------------------------------- /api/data/images/ehimetalor-akhere-unuabona-wa5z9o9fgjw-unsplash_id7ek3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/ehimetalor-akhere-unuabona-wa5z9o9fgjw-unsplash_id7ek3.jpg -------------------------------------------------------------------------------- /api/data/images/ivan-bandura-EWVXMoIWlpA-unsplash_vjrubi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/ivan-bandura-EWVXMoIWlpA-unsplash_vjrubi.jpg -------------------------------------------------------------------------------- /api/data/images/markus-winkler--1BAvfgHFK4-unsplash_xqb6ce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/markus-winkler--1BAvfgHFK4-unsplash_xqb6ce.jpg -------------------------------------------------------------------------------- /api/data/images/maxim-potkin-CWmtVAqtgRw-unsplash_aqlmov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/maxim-potkin-CWmtVAqtgRw-unsplash_aqlmov.jpg -------------------------------------------------------------------------------- /api/data/images/oscar-nilsson-W-oqNwbmin0-unsplash_o1lbem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/oscar-nilsson-W-oqNwbmin0-unsplash_o1lbem.jpg -------------------------------------------------------------------------------- /api/data/images/rahul-chakraborty-E_mHYosg98k-unsplash_hotcyh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/rahul-chakraborty-E_mHYosg98k-unsplash_hotcyh.jpg -------------------------------------------------------------------------------- /api/data/images/riyan-ong-fLa1MkdnbV8-unsplash_ni7dyd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/riyan-ong-fLa1MkdnbV8-unsplash_ni7dyd.jpg -------------------------------------------------------------------------------- /api/data/images/screen-post-vYxnwamt6HE-unsplash_zl3gji.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/screen-post-vYxnwamt6HE-unsplash_zl3gji.jpg -------------------------------------------------------------------------------- /api/data/images/sean-whelan-NG_a-z0ScM0-unsplash_itzjzs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/sean-whelan-NG_a-z0ScM0-unsplash_itzjzs.jpg -------------------------------------------------------------------------------- /api/data/images/selwyn-van-haaren-RfAADt_V2QU-unsplash_psga66.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/selwyn-van-haaren-RfAADt_V2QU-unsplash_psga66.jpg -------------------------------------------------------------------------------- /api/data/images/tyler-casey-f5FyIQGNUcM-unsplash_l83vm5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/api/data/images/tyler-casey-f5FyIQGNUcM-unsplash_l83vm5.jpg -------------------------------------------------------------------------------- /api/gadgets.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "ady teenagerinro", 4 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618745681/ady-teenagerinro-sQ0xXxQdfeY-unsplash_qgefwh.jpg", 5 | "price": "346.00", 6 | "uuid": "aaa0a423-7e56-4347-a4b9-e835e109eb79", 7 | "category": "gadget" 8 | }, 9 | { 10 | "name": "daniel korpai", 11 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618751366/daniel-korpai-H0vKZjt2k1E-unsplash_f2hyzr.jpg", 12 | "price": "204.00", 13 | "uuid": "56293a79-5f11-4c96-9c45-b659c6d2791c", 14 | "category": "gadget" 15 | }, 16 | { 17 | "name": "maxim potkin", 18 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618755155/maxim-potkin-CWmtVAqtgRw-unsplash_aqlmov.jpg", 19 | "price": "780.00", 20 | "uuid": "45966caf-2b9c-47ce-b91f-6f3b40fa1641", 21 | "category": "gadget" 22 | }, 23 | { 24 | "name": "riyan ong", 25 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618767717/riyan-ong-fLa1MkdnbV8-unsplash_ni7dyd.jpg", 26 | "price": "370.00", 27 | "uuid": "5f5f502b-e8da-41bf-a6af-a603b7705d1a", 28 | "category": "gadget" 29 | }, 30 | { 31 | "name": "bin jaleel almanza", 32 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618767825/bin-jaleel-almanza-VKI8S_O-pYg-unsplash_xqqb9x.jpg", 33 | "price": "362.00", 34 | "uuid": "c1a8ddb3-cc4b-41c5-a74a-201cf56184e4", 35 | "category": "gadget" 36 | }, 37 | { 38 | "name": "oscar nilsson", 39 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618767916/oscar-nilsson-W-oqNwbmin0-unsplash_o1lbem.jpg", 40 | "price": "333.00", 41 | "uuid": "4e6a5662-6e13-42c6-b855-e084e4cdc732", 42 | "category": "gadget" 43 | }, 44 | { 45 | "name": "screen post", 46 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768050/screen-post-vYxnwamt6HE-unsplash_zl3gji.jpg", 47 | "price": "32.00", 48 | "uuid": "0f83ffed-acd4-4f13-b52b-c2252eee1397", 49 | "category": "gadget" 50 | }, 51 | { 52 | "name": "chuttersnap", 53 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768127/chuttersnap-CuLzFor2c4M-unsplash_auzamk.jpg", 54 | "price": "255.00", 55 | "uuid": "bd6a6ae6-464f-4d0d-9027-6df3a7705971", 56 | "category": "gadget" 57 | }, 58 | { 59 | "name": "artem beliaikin", 60 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768190/artem-beliaikin-zsam4a4cpq4-unsplash_z4r0hv.jpg", 61 | "price": "219.00", 62 | "uuid": "478d40fe-4da0-40a9-932d-b633425b94fb", 63 | "category": "gadget" 64 | }, 65 | { 66 | "name": "tyler casey", 67 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768509/tyler-casey-f5FyIQGNUcM-unsplash_l83vm5.jpg", 68 | "price": "932.00", 69 | "uuid": "ca813e6e-b23f-4da0-8aac-a0cd0d150382", 70 | "category": "gadget" 71 | }, 72 | { 73 | "name": "markus winkler", 74 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768583/markus-winkler--1BAvfgHFK4-unsplash_xqb6ce.jpg", 75 | "price": "753.00", 76 | "uuid": "8b7f0d15-8d19-4d48-a4a4-341e7395c26f", 77 | "category": "gadget" 78 | }, 79 | { 80 | "name": "sean whelan", 81 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768681/sean-whelan-NG_a-z0ScM0-unsplash_itzjzs.jpg", 82 | "price": "275.00", 83 | "uuid": "f9a44450-e8ac-4faa-971a-2dc09af22c83", 84 | "category": "gadget" 85 | }, 86 | { 87 | "name": "ehimetalor akhere unuabona", 88 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768736/ehimetalor-akhere-unuabona-wa5z9o9fgjw-unsplash_id7ek3.jpg", 89 | "price": "947.00", 90 | "uuid": "ada02cb6-d4f1-422e-8da3-69ed735e6c7b", 91 | "category": "gadget" 92 | }, 93 | { 94 | "name": "rahul chakraborty", 95 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768792/rahul-chakraborty-E_mHYosg98k-unsplash_hotcyh.jpg", 96 | "price": "223.00", 97 | "uuid": "6a99d5e7-a0f7-4557-a217-aad7bb12bbba", 98 | "category": "gadget" 99 | }, 100 | { 101 | "name": "debby hudson", 102 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618769005/debby-hudson-STo4ziY5g7A-unsplash_g4xlkv.jpg", 103 | "price": "359.00", 104 | "uuid": "6afb59d8-b4b9-457c-ae9c-7bb75eeb00d2", 105 | "category": "gadget" 106 | }, 107 | { 108 | "name": "selwyn van haaren", 109 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768953/selwyn-van-haaren-RfAADt_V2QU-unsplash_psga66.jpg", 110 | "price": "591.00", 111 | "uuid": "bd272549-4c84-447c-9f56-cfe751a3724f", 112 | "category": "gadget" 113 | }, 114 | { 115 | "name": "ivan bandura", 116 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768950/ivan-bandura-EWVXMoIWlpA-unsplash_vjrubi.jpg", 117 | "price": "550.00", 118 | "uuid": "e5ca6daa-2d14-4bd2-8de1-9f8450e08a3c", 119 | "category": "gadget" 120 | }, 121 | { 122 | "name": "arisa chattasa", 123 | "image": "https://res.cloudinary.com/bcinarli/image/upload/v1618768950/arisa-chattasa-VbUNV9Ui7zk-unsplash_xmaen0.jpg", 124 | "price": "250.00", 125 | "uuid": "fd801756-3ef5-45ac-a1cf-0953edc2b9cb", 126 | "category": "gadget" 127 | } 128 | ] 129 | -------------------------------------------------------------------------------- /app-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/app-screenshot.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.cache.using(() => process.env.NODE_ENV); 3 | const env = api.env().split(' '); 4 | const browserslistEnv = 5 | process.env.BROWSERSLIST_ENV || env.includes('legacy') 6 | ? 'legacy' 7 | : 'modern'; 8 | 9 | return { 10 | presets: [ 11 | ['@babel/preset-react', { runtime: 'automatic' }], 12 | '@babel/preset-typescript' 13 | ], 14 | plugins: [ 15 | ['@babel/plugin-proposal-class-properties', { loose: true }], 16 | env.includes('development') && [ 17 | 'react-refresh/babel', 18 | // skipping env check since we have other env types e.g. modern/legacy are defined 19 | { skipEnvCheck: true } 20 | ] 21 | ].filter(Boolean), 22 | env: { 23 | modern: { 24 | presets: [ 25 | [ 26 | '@babel/preset-env', 27 | { 28 | bugfixes: true, 29 | targets: { esmodules: true }, 30 | modules: false, 31 | useBuiltIns: 'usage', 32 | corejs: { version: '3' }, 33 | browserslistEnv 34 | } 35 | ] 36 | ] 37 | }, 38 | legacy: { 39 | presets: [ 40 | [ 41 | '@babel/preset-env', 42 | { 43 | modules: false, 44 | useBuiltIns: 'usage', 45 | corejs: { version: '3' }, 46 | browserslistEnv 47 | } 48 | ] 49 | ] 50 | }, 51 | test: { 52 | presets: [ 53 | [ 54 | '@babel/preset-env', 55 | { 56 | targets: { 57 | node: 'current' 58 | } 59 | } 60 | ] 61 | ] 62 | } 63 | } 64 | }; 65 | }; 66 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.scss' { 2 | const content: { [className: string]: string }; 3 | export = content; 4 | } 5 | 6 | declare module '*.png' { 7 | const value: any; 8 | export = value; 9 | } 10 | 11 | // webpack define plugin definitions 12 | declare var API: string; 13 | declare var IMAGE_API: string; 14 | -------------------------------------------------------------------------------- /lighthouse-reports/stage-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/lighthouse-reports/stage-0.png -------------------------------------------------------------------------------- /lighthouse-reports/stage-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/lighthouse-reports/stage-11.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lightning-fast-pwa", 3 | "version": "1.0.0", 4 | "description": "PWA Speed Loading Demo", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack serve --node-env development", 8 | "build": "webpack", 9 | "lint": "eslint ./src --fix" 10 | }, 11 | "author": "Bilal Cinarli ", 12 | "license": "MIT", 13 | "dependencies": { 14 | "core-js": "^3.10.1", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-router-dom": "^5.2.0" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "^7.13.13", 23 | "@babel/preset-typescript": "^7.13.0", 24 | "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.3", 25 | "@types/react": "^17.0.3", 26 | "@types/react-dom": "^17.0.3", 27 | "@types/react-router-dom": "^5.1.7", 28 | "autoprefixer": "^10.2.5", 29 | "babel-loader": "^8.2.2", 30 | "copy-webpack-plugin": "^8.1.1", 31 | "css-loader": "^5.2.2", 32 | "eslint": "^7.24.0", 33 | "fork-ts-checker-webpack-plugin": "^6.2.1", 34 | "html-webpack-plugin": "^5.3.1", 35 | "mini-css-extract-plugin": "^1.5.0", 36 | "normalize.css": "^8.0.1", 37 | "postcss": "^8.2.10", 38 | "postcss-loader": "^5.2.0", 39 | "prettier": "^2.2.1", 40 | "react-refresh": "^0.10.0", 41 | "sass": "^1.32.10", 42 | "sass-loader": "^11.0.1", 43 | "style-loader": "^2.0.0", 44 | "typescript": "^4.2.4", 45 | "webpack": "^5.33.2", 46 | "webpack-cli": "^4.6.0", 47 | "webpack-dev-server": "^3.11.2" 48 | }, 49 | "repository": { 50 | "type": "git", 51 | "url": "git+https://github.com/bcinarli/lightning-fast-loading.git" 52 | }, 53 | "keywords": [ 54 | "PWA", 55 | "Service Workers", 56 | "Fast Loading", 57 | "Optimization", 58 | "Performance" 59 | ], 60 | "bugs": { 61 | "url": "https://github.com/bcinarli/lightning-fast-loading/issues" 62 | }, 63 | "homepage": "https://github.com/bcinarli/lightning-fast-loading#readme", 64 | "browserslist": { 65 | "modern": [ 66 | "Chrome >= 61", 67 | "Edge >= 16", 68 | "Firefox >= 60", 69 | "Safari >= 10.1", 70 | "Opera >= 48" 71 | ], 72 | "legacy": [ 73 | "IE 11", 74 | "> 0.5%", 75 | "last 1 version", 76 | "not dead" 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['autoprefixer'] 3 | }; -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcinarli/lightning-fast-loading/981987b6b7fe2c4f7870a864205e8ec5748cd86f/src/assets/logo.png -------------------------------------------------------------------------------- /src/scripts/app.tsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter } from 'react-router-dom'; 2 | import Header from './components/header/header'; 3 | import RouterSwitch from './components/router-switch/router-switch'; 4 | import Footer from './components/footer/footer'; 5 | 6 | const App = () => { 7 | return ( 8 | 9 |
10 |
11 | 12 |
13 |