implemented code splitting for chapter 17 project

Author: velopert

17/react-router-tutorial/config/webpack.config.dev.js

@@ -32,26 +32,17 @@ module.exports = {
   // These are the "entry points" to our application.
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-    // We ship a few polyfills by default:
-    require.resolve('./polyfills'),
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
+  entry: {
+    app: [
+      require.resolve('react-dev-utils/webpackHotDevClient'), paths.appIndexJs,
+    ],
+    vendor: [
+      require.resolve('./polyfills'),
+      'react',
+      'react-dom',
+      'react-router-dom',
+    ]
+  },
   output: {
     // Add /* filename */ comments to generated require()s in the output.
     pathinfo: true,
@@ -211,6 +202,10 @@ module.exports = {
     ],
   },
   plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'vendor.js'
+    }),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

17/react-router-tutorial/config/webpack.config.prod.js

@@ -56,7 +56,15 @@ module.exports = {
   // You can exclude the *.map files from the build during deployment.
   devtool: shouldUseSourceMap ? 'source-map' : false,
   // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
+  entry: {
+    app: paths.appIndexJs,
+    vendor: [
+      require.resolve('./polyfills'),
+      'react',
+      'react-dom',
+      'react-router-dom'
+    ]
+  },
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -234,6 +242,15 @@ module.exports = {
     ],
   },
   plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /^pages$/,
+      'pages/index.async.js'
+     ),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'vendor.js'
+    }),
+
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

17/react-router-tutorial/src/App.js

@@ -6,6 +6,7 @@ import {
   Posts
 } from 'pages';
 import Menu from 'components/Menu';
+import AsyncSplitMe from 'components/AsyncSplitMe';
 
 const App = () => {
   return (

17/react-router-tutorial/src/components/AsyncSplitMe.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+class AsyncSplitMe extends Component {
+  state = {
+    SplitMe: null
+  }
+  
+  loadSplitMe = () => {
+    // 비동기적으로 코드를 불러옵니다. 함수는 Promise를 결과로 반환합니다.
+    // import()는 모듈의 전체 네임스페이스를 불러오므로, default를 직접 지정해주어야 합니다.
+    import('./SplitMe').then(({default: SplitMe}) => {
+      this.setState({
+        SplitMe
+      });
+    });
+  }
+  render() {
+    const { SplitMe } = this.state;
+    // SplitMe가 있으면 이를 렌더링하고, 없으면 버튼을 렌더링합니다.
+    // 버튼 클릭 시 SplitMe를 불러옵니다.
+    return SplitMe ? <SplitMe/> : <button onClick={this.loadSplitMe}>SplitMe 로딩</button>
+  }
+}
+
+export default AsyncSplitMe;

17/react-router-tutorial/src/components/SplitMe.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SplitMe = () => {
+  return (
+    <h3>
+      청크
+    </h3>
+  );
+};
+
+export default SplitMe;

17/react-router-tutorial/src/lib/asyncComponent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default function asyncComponent(getComponent) {
+  return class AsyncComponent extends React.Component {
+    static Component = null;
+    state = { Component: AsyncComponent.Component };
+
+    constructor(props) {
+      super(props);
+      if (AsyncComponent.Component) return;
+      getComponent().then(({default: Component}) => {
+        AsyncComponent.Component = Component;
+        this.setState({ Component });
+      });
+    }
+
+    render() {
+      const { Component } = this.state
+      if (Component) {
+        return <Component {...this.props} />
+      }
+      return null
+    }
+  }
+}

17/react-router-tutorial/src/pages/index.async.js

@@ -0,0 +1,6 @@
+import asyncComponent from 'lib/asyncComponent';
+
+export const Home = asyncComponent(() => import('./Home'));
+export const About = asyncComponent(() => import('./About'));
+export const Post = asyncComponent(() => import('./Post'));
+export const Posts = asyncComponent(() => import('./Posts'));