├── .gitignore
├── .prettierrc
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
└── src
├── deps-included
├── dep.js
└── index.js
├── group
├── one.js
└── two.js
├── index.js
├── prefetched.js
└── preloaded.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | .docz
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "avoid",
3 | "bracketSpacing": false,
4 | "endOfLine": "lf",
5 | "htmlWhitespaceSensitivity": "css",
6 | "insertPragma": false,
7 | "jsxBracketSameLine": false,
8 | "jsxSingleQuote": false,
9 | "printWidth": 80,
10 | "proseWrap": "always",
11 | "quoteProps": "as-needed",
12 | "requirePragma": false,
13 | "semi": false,
14 | "singleQuote": true,
15 | "tabWidth": 2,
16 | "trailingComma": "all",
17 | "useTabs": false
18 | }
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | A demo for my blog post:
2 | [Optimize Code Splitting with Webpack](https://kentcdodds.com/blog/optimize-code-splitting-with-webpack)
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-splitting-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "16.12.0",
7 | "react-dom": "16.12.0",
8 | "react-scripts": "3.2.0"
9 | },
10 | "scripts": {
11 | "start": "react-scripts start",
12 | "build": "react-scripts build",
13 | "test": "react-scripts test"
14 | },
15 | "eslintConfig": {
16 | "extends": "react-app"
17 | },
18 | "browserslist": [
19 | ">0.2%",
20 | "not dead",
21 | "not ie <= 11",
22 | "not op_mini all"
23 | ],
24 | "keywords": [],
25 | "description": ""
26 | }
27 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/code-splitting-demo/6f864bbc13b969731b1f53844c80bcf377ec54ce/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
--------------------------------------------------------------------------------
/src/deps-included/dep.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => Hello from a dependency!
4 |
--------------------------------------------------------------------------------
/src/deps-included/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Dep from './dep'
3 |
4 | export default () =>
5 |
--------------------------------------------------------------------------------
/src/group/one.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => One
4 |
--------------------------------------------------------------------------------
/src/group/two.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => Two
4 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | const DepsIncluded = React.lazy(() =>
5 | import(/* webpackChunkName: "deps" */ './deps-included'),
6 | )
7 | const One = React.lazy(() =>
8 | import(/* webpackChunkName: "group" */ './group/one'),
9 | )
10 | const Two = React.lazy(() =>
11 | import(/* webpackChunkName: "group" */ './group/two'),
12 | )
13 |
14 | const Prefetched = React.lazy(() =>
15 | import(
16 | /* webpackPrefetch: true */
17 | /* webpackChunkName: "prefetched" */
18 | './prefetched'
19 | ),
20 | )
21 | const Preloaded = React.lazy(() =>
22 | import(
23 | /* webpackPreload: true */
24 | /* webpackChunkName: "preload" */
25 | './preloaded'
26 | ),
27 | )
28 |
29 | function App() {
30 | const [show, setShow] = React.useState(false)
31 | return (
32 |
33 |
34 | {show ? (
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Prefetched module
4 |
--------------------------------------------------------------------------------
/src/preloaded.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => Preloaded module
4 |
--------------------------------------------------------------------------------