Feature(frontend): add dynamic import (code split) support

Armour · Armour · commit 357d3a0f00cd · 2018-08-14T14:41:11.000-07:00
diff --git a/frontend/src/pages/HomePage/components/ContentLoader/contentLoader.scss b/frontend/src/pages/HomePage/components/ContentLoader/contentLoader.scss
@@ -0,0 +1,3 @@
+.contentLoader {
+  margin: auto;
+}
diff --git a/frontend/src/pages/HomePage/components/ContentLoader/contentLoader.tsx b/frontend/src/pages/HomePage/components/ContentLoader/contentLoader.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+
+const styles = require('./contentLoader.scss');
+
+export default (props: ContentLoaderProps) => (
+  <div className={styles.contentLoader}>
+    <ContentLoader
+      height={400}
+      width={400}
+      speed={2}
+      primaryColor='#f3f3f3'
+      secondaryColor='#ecebeb'
+      {...props}
+    >
+      <rect x='160.5' y='11' rx='4' ry='4' width='76.63000000000001' height='15.093' />
+      <rect x='60.5' y='35.05' rx='1' ry='1' width='275.40000000000003' height='151.35999999999999' />
+    </ContentLoader>
+  </div>
+);
diff --git a/frontend/src/pages/HomePage/components/ContentLoader/index.tsx b/frontend/src/pages/HomePage/components/ContentLoader/index.tsx
@@ -0,0 +1 @@
+export {default} from './contentLoader';
diff --git a/frontend/src/pages/NotFoundPage/components/ContentLoader/contentLoader.scss b/frontend/src/pages/NotFoundPage/components/ContentLoader/contentLoader.scss
@@ -0,0 +1,4 @@
+.contentLoader {
+  max-width: 50%;
+  margin: auto;
+}
diff --git a/frontend/src/pages/NotFoundPage/components/ContentLoader/contentLoader.tsx b/frontend/src/pages/NotFoundPage/components/ContentLoader/contentLoader.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+
+const styles = require('./contentLoader.scss');
+
+export default (props: ContentLoaderProps) => (
+  <div className={styles.contentLoader}>
+    <ContentLoader
+      height={326}
+      width={400}
+      speed={2}
+      primaryColor='#f3f3f3'
+      secondaryColor='#ecebeb'
+      {...props}
+    >
+      <rect x='93' y='24' rx='4' ry='4' width='210' height='30.68' />
+      <rect x='36' y='92.05' rx='4' ry='4' width='330.24' height='193.63' />
+    </ContentLoader>
+  </div>
+);
diff --git a/frontend/src/pages/NotFoundPage/components/ContentLoader/index.tsx b/frontend/src/pages/NotFoundPage/components/ContentLoader/index.tsx
@@ -0,0 +1 @@
+export {default} from './contentLoader';
diff --git a/frontend/src/pages/NotFoundPage/notFoundPage.scss b/frontend/src/pages/NotFoundPage/notFoundPage.scss
@@ -3,4 +3,5 @@
   margin: auto;
   padding: 60px;
   max-width: 90%;
+  object-fit: cover;
 }
diff --git a/frontend/src/pages/NotFoundPage/notFoundPage.tsx b/frontend/src/pages/NotFoundPage/notFoundPage.tsx
@@ -29,7 +29,7 @@ export default class NotFoundPage extends React.Component<{}, INotFoundPageState
     return (
       <div>
         <h1 className='page-title'>404 Not Found</h1>
-        <img className={styles['not-found-img']} src={require('./assets/images/' + notFoundImageList[this.state.imageId])} alt='not-found-img' />
+        <img className={styles['not-found-img']} src={require('./assets/images/' + notFoundImageList[this.state.imageId])} alt='not-found-img' height='550px' width='750px' />
       </div>
     );
   }
diff --git a/frontend/src/pages/ParallaxPage/components/ContentLoader/contentLoader.scss b/frontend/src/pages/ParallaxPage/components/ContentLoader/contentLoader.scss
@@ -0,0 +1,3 @@
+.contentLoader {
+  margin: auto;
+}
diff --git a/frontend/src/pages/ParallaxPage/components/ContentLoader/contentLoader.tsx b/frontend/src/pages/ParallaxPage/components/ContentLoader/contentLoader.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+
+const styles = require('./contentLoader.scss');
+
+export default (props: ContentLoaderProps) => (
+  <div className={styles.contentLoader}>
+    <ContentLoader
+      height={500}
+      width={400}
+      speed={2}
+      primaryColor='#f3f3f3'
+      secondaryColor='#ecebeb'
+      {...props}
+    >
+      <rect x='160' y='12' rx='4' ry='4' width='80' height='15.6468' />
+      <rect x='0' y='41.05' rx='4' ry='4' width='399.5904' height='112.7321' />
+      <rect x='49' y='163.05' rx='4' ry='4' width='299' height='126.9' />
+    </ContentLoader>
+  </div>
+);
diff --git a/frontend/src/pages/ParallaxPage/components/ContentLoader/index.tsx b/frontend/src/pages/ParallaxPage/components/ContentLoader/index.tsx
@@ -0,0 +1 @@
+export {default} from './contentLoader';
diff --git a/frontend/src/pages/ParallaxPage/parallaxPage.tsx b/frontend/src/pages/ParallaxPage/parallaxPage.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { PARALLAX_CODE } from './components/PrismCodes';
-import PrismCodes from './components/PrismCodes';
+import PrismCodes, { PARALLAX_CODE } from './components/PrismCodes';
 
 const styles = require('./parallaxPage.scss');
 
diff --git a/frontend/src/pages/ReactPage/components/ContentLoader/contentLoader.scss b/frontend/src/pages/ReactPage/components/ContentLoader/contentLoader.scss
@@ -0,0 +1,4 @@
+.contentLoader {
+  max-width: 50%;
+  margin: auto;
+}
diff --git a/frontend/src/pages/ReactPage/components/ContentLoader/contentLoader.tsx b/frontend/src/pages/ReactPage/components/ContentLoader/contentLoader.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+
+const styles = require('./contentLoader.scss');
+
+export default (props: ContentLoaderProps) => (
+  <div className={styles.contentLoader}>
+    <ContentLoader
+      height={400}
+      width={400}
+      speed={2}
+      primaryColor='#f3f3f3'
+      secondaryColor='#ecebeb'
+      {...props}
+    >
+      <rect x='93' y='24' rx='4' ry='4' width='210' height='30.68' />
+      <rect x='0' y='76.05' rx='4' ry='4' width='400' height='304' />
+    </ContentLoader>
+  </div>
+);
diff --git a/frontend/src/pages/ReactPage/components/ContentLoader/index.tsx b/frontend/src/pages/ReactPage/components/ContentLoader/index.tsx
@@ -0,0 +1 @@
+export {default} from './contentLoader';
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -1,15 +1,36 @@
 import * as React from 'react';
+import Loadable from 'react-loadable';
 import { Route, Switch } from 'react-router';
 
 import 'materialize-css';
 import 'sass/global';
 
 import Footer from 'components/Footer';
 import Header from 'components/Header';
-import HomePage from 'pages/HomePage';
-import NotFoundPage from 'pages/NotFoundPage';
-import ParallaxPage from 'pages/ParallaxPage';
-import ReactPage from 'pages/ReactPage';
+import HomePageLoader from 'pages/HomePage/components/ContentLoader';
+import NotFoundPageLoader from 'pages/NotFoundPage/components/ContentLoader';
+import ParallaxPageLoader from 'pages/ParallaxPage/components/ContentLoader';
+import ReactPageLoader from 'pages/ReactPage/components/ContentLoader';
+
+const HomePage = Loadable({
+  loader: () => import(/* webpackChunkName: "home-page" */ './pages/HomePage'),
+  loading: HomePageLoader,
+});
+
+const NotFoundPage = Loadable({
+  loader: () => import(/* webpackChunkName: "not-found-page" */ './pages/NotFoundPage'),
+  loading: NotFoundPageLoader,
+});
+
+const ParallaxPage = Loadable({
+  loader: () => import(/* webpackChunkName: "parallax-page" */ './pages/ParallaxPage'),
+  loading: ParallaxPageLoader,
+});
+
+const ReactPage = Loadable({
+  loader: () => import(/* webpackChunkName: "react-page" */ './pages/ReactPage'),
+  loading: ReactPageLoader,
+});
 
 export default (
   <div>
diff --git a/package.json b/package.json
@@ -36,7 +36,9 @@
     "@types/materialize-css": "^1.0.4",
     "@types/prismjs": "^1.9.0",
     "@types/react": "^16.4.9",
+    "@types/react-content-loader": "^3.1.3",
     "@types/react-dom": "^16.0.7",
+    "@types/react-loadable": "^5.4.1",
     "@types/react-redux": "^6.0.6",
     "@types/react-router": "^4.0.30",
     "@types/react-router-dom": "^4.3.0",
@@ -88,8 +90,10 @@
     "prismjs": "^1.15.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "react": "^16.4.2",
+    "react-content-loader": "^3.1.2",
     "react-dom": "^16.4.2",
     "react-hot-loader": "^4.3.4",
+    "react-loadable": "^5.5.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "frontend/src",
     "target": "es5",
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "lib": [
       "dom",
@@ -17,7 +17,6 @@
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "removeComments": true,
     "sourceMap": true,
     "strict": true
   },
diff --git a/webpack.config.base.babel.js b/webpack.config.base.babel.js
@@ -127,7 +127,7 @@ export default {
     // Extract css part from javascript bundle into separated file
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash:10].css',
-      chunkFilename: '[id].[contenthash:10].css',
+      chunkFilename: '[name].[contenthash:10].css',
     }),
     // Better building progress display
     new ProgressBarWebpackPlugin(),
diff --git a/webpack.config.dev.babel.js b/webpack.config.dev.babel.js
@@ -15,8 +15,10 @@ export default merge(BaseWebpackConfig, {
   output: {
     // path: the output directory as an absolute path (required)
     path: path.resolve(__dirname, 'frontend/dist/dev'),
-    // filename: specifies the name of output file on disk (required)
+    // filename: specifies the name of entry output file (required)
     filename: '[name].[hash:10].js',
+    // chunkFilename: specifies the name of non-entry output files (e.g. dynamic import component)
+    chunkFilename: '[name].[hash:10].js',
   },
 
   devServer: {
diff --git a/webpack.config.prod.babel.js b/webpack.config.prod.babel.js
@@ -16,8 +16,10 @@ export default merge(BaseWebpackConfig, {
   output: {
     // path: the output directory as an absolute path (required)
     path: path.resolve(__dirname, 'frontend/dist/prod'),
-    // filename: specifies the name of output file on disk (required)
+    // filename: specifies the name of entry output file (required)
     filename: '[name].[chunkhash:10].js',
+    // chunkFilename: specifies the name of non-entry output files (e.g. dynamic import component)
+    chunkFilename: '[name].[chunkhash:10].js',
     // publicPath: specifies the server-relative URL of the output resource directory
     // https://webpack.js.org/configuration/output/#output-publicpath
     publicPath: '/',
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.contentLoader {`
	`2`	`+ margin: auto;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export {default} from './contentLoader';`
Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,5 @@`
`3`	`3`	`margin: auto;`
`4`	`4`	`padding: 60px;`
`5`	`5`	`max-width: 90%;`
	`6`	`+ object-fit: cover;`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export default class NotFoundPage extends React.Component<{}, INotFoundPageState`
`29`	`29`	`return (`
`30`	`30`	`<div>`
`31`	`31`	`<h1 className='page-title'>404 Not Found</h1>`
`32`		`- <img className={styles['not-found-img']} src={require('./assets/images/' + notFoundImageList[this.state.imageId])} alt='not-found-img' />`
	`32`	`+ <img className={styles['not-found-img']} src={require('./assets/images/' + notFoundImageList[this.state.imageId])} alt='not-found-img' height='550px' width='750px' />`
`33`	`33`	`</div>`
`34`	`34`	`);`
`35`	`35`	`}`