[incubator-dubbo-website] branch asf-site updated: optimization for loading js (#27)

[il...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

iluo pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-website.git


The following commit(s) were added to refs/heads/asf-site by this push:
     new 4443aea  optimization for loading js (#27)
4443aea is described below

commit 4443aea81cd6c74f9f438ef87387b4f327686d6e
Author: chenliandong <li...@alibaba-inc.com>
AuthorDate: Thu Jul 5 10:07:37 2018 +0800

    optimization for loading js (#27)
    
    * feat: 新版站点
    
    * fix: issue #14
    
    * feat: build
    
    * feat:  optimization for loading js
    
    * chore: adjust build for loading js
---
 gulpfile.js                             |  2 +-
 src/components/asyncComponent/index.jsx | 30 ++++++++++++++++++++++++++++++
 src/index.jsx                           | 13 ++++++++-----
 webpack.config.js                       |  3 ++-
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 19ad158..3686b19 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -68,7 +68,7 @@ gulp.task('webpack-dev-server', () => {
   myConfig.plugins.push(new webpack.HotModuleReplacementPlugin({}));
   // Start a webpack-dev-server
   new WebpackDevServer(webpack(myConfig), {
-    publicPath: myConfig.output.publicPath,
+    publicPath: '//localhost:8080/build/',
     hot: true,
     inline: true,
     stats: {
diff --git a/src/components/asyncComponent/index.jsx b/src/components/asyncComponent/index.jsx
new file mode 100644
index 0000000..1a140f5
--- /dev/null
+++ b/src/components/asyncComponent/index.jsx
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+      return C
+        ? <C {...this.props} />
+        : null;
+    }
+  }
+
+  return AsyncComponent;
+}
diff --git a/src/index.jsx b/src/index.jsx
index b7def8d..0d455cf 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
-import Home from './pages/home';
-import Community from './pages/community';
-import Blog from './pages/blog';
-import BlogDetail from './pages/blogDetail';
-import Documentation from './pages/documentation';
+import asyncComponent from './components/asyncComponent';
+
 import './index.scss';
 
+const Home = asyncComponent(() => import('./pages/home'));
+const Community = asyncComponent(() => import('./pages/community'));
+const Blog = asyncComponent(() => import('./pages/blog'));
+const BlogDetail = asyncComponent(() => import('./pages/blogDetail'));
+const Documentation = asyncComponent(() => import('./pages/documentation'));
+
 class App extends React.Component {
   render() {
     // 最后两个未用模板参数的原因是路径深度不一定
diff --git a/webpack.config.js b/webpack.config.js
index 08c1dc6..0734b04 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,8 +9,9 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, 'build'),
-    publicPath: '/build/',
+    publicPath: './build/',
     filename: '[name].js',
+    chunkFilename: '[chunkhash].js',
   },
   externals: {
     react: 'React',