Merge pull request #2 from Reaper622/dev

图标添加与动态加载

Author: Reaper622

.babelrc

@@ -7,5 +7,6 @@
     "react-hot-loader/babel",
     "styled-components",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-syntax-dynamic-import"
   ]
 }

README.md

@@ -6,7 +6,7 @@ A system to build your own blog site.
 
 修改一个配置文件，即可搭建出你自己的博客平台。
 
-线上演示地址: [reaperlee.cn](www.reaperlee.cn)
+线上演示地址: [reaperlee.cn](http://www.reaperlee.cn)
 
 
 

config.json

@@ -7,18 +7,6 @@
       "avatar": "https://avatars2.githubusercontent.com/u/33087372?s=460&v=4",
       "intro": "The world's best FE developer",
       "path": "https://github.com/LumiereXyloto"
-    },
-    {
-      "name": "Lumiere Xyloto2",
-      "avatar": "https://avatars2.githubusercontent.com/u/33087372?s=460&v=4",
-      "intro": "The world's best FE developer",
-      "path": "https://github.com/LumiereXyloto"
-    },
-    {
-      "name": "Lumiere Xyloto3",
-      "avatar": "https://avatars2.githubusercontent.com/u/33087372?s=460&v=4",
-      "intro": "The world's best FE developer",
-      "path": "https://github.com/LumiereXyloto"
     }
   ],
   "server_url": "http://127.0.0.1:4000"

config/webpack.common.js

@@ -77,7 +77,8 @@ const commonConfig = {
       threadPool: happyThreadPool
     }),
     new HtmlWebpackPlugin({
-      template: 'public/index.html'
+      template: 'public/index.html',
+      favicon: 'public/favicon.ico'
     }),
     // 拷贝的静态资源不做打包处理
     new CopyWebpackPlugin([{

package-lock.json

@@ -23,6 +23,7 @@
   },
   "homepage": "https://gitlab.com/Reaper622/react-cli-singlepage#README",
   "dependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/polyfill": "^7.4.4",
     "animate.css": "^3.7.2",
     "antd": "^3.23.2",
@@ -39,6 +40,7 @@
     "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-loadable": "^5.5.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.0.1",
     "react-transition-group": "^4.3.0",

package.json

@@ -1,3 +1,4 @@
+import React from 'react'
 import { Spin } from 'antd'
 
 export default () => (
@@ -10,7 +11,7 @@ export default () => (
                 top: 0;
                 right: 0;
                 bottom: 0;
-                background: rgba(255,255,255,0.3);
+                background: rgba(255,255,255,0.2);
                 z-index: 10001;
                 display: flex;
                 align-items: center;

src/components/PageLoading.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import {BrowserRouter, HashRouter, Route, Switch} from 'react-router-dom'
 import {createStore, applyMiddleware, compose} from 'redux'
+import Loadable from 'react-loadable'
 import thunk from 'redux-thunk'
 import { Provider } from 'react-redux'
 import { reducer } from './redux/store'
@@ -14,10 +15,31 @@ import 'animate.css/animate.min.css'
 import PageLoading from '@components/PageLoading'
 
 // 页面
-import Index from './Pages/Index'
+// import Index from './Pages/Index'
 import Article from './Pages/Articles'
-import Archives from './Pages/Archives'
-import Friend from './Pages/Friend'
+// import Archives from './Pages/Archives'
+// import Friend from './Pages/Friend'
+// 动态路由加载，提升用户感受
+const AsyncIndex = Loadable({
+  loading: PageLoading ,
+  timeout: 1000,
+  loader: () => import('./Pages/Index')
+})
+// const AsyncArticle = Loadable({
+//   loading: PageLoading ,
+//   timeout: 1000,
+//   loader: () => import('./Pages/Articles')
+// })
+const AsyncArchives = Loadable({
+  loading: PageLoading ,
+  timeout: 1000,
+  loader: () => import('./Pages/Archives')
+})
+const AsyncFriend = Loadable({
+  loading: PageLoading ,
+  timeout: 1000,
+  loader: () => import('./Pages/Friend')
+})
 
 const store = createStore(reducer, compose(
   applyMiddleware(thunk),
@@ -32,10 +54,10 @@ class App extends Component {
         <BrowserRouter>
         {/* <HashRouter> */}
             <Switch>
-              <Route path='/' exact component={Index} />
+              <Route path='/' exact component={AsyncIndex} />
               <Route path='/articles/:id' component={Article} />
-              <Route path='/archives' component={Archives} />
-              <Route path='/friend' component={Friend} />
+              <Route path='/archives' component={AsyncArchives} />
+              <Route path='/friend' component={AsyncFriend} />
             </Switch>
           {/* </HashRouter> */}
         </BrowserRouter>