[GitHub] beiwei30 closed pull request #27: optimization for loading js

[GitBox <gi...@apache.org>]

beiwei30 closed pull request #27: optimization for loading js
URL: https://github.com/apache/incubator-dubbo-website/pull/27
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

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',


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@dubbo.apache.org
For additional commands, e-mail: notifications-help@dubbo.apache.org