diff --git a/.babelrc b/.babelrc index 04be9d9..7ebc9dd 100644 --- a/.babelrc +++ b/.babelrc @@ -7,5 +7,6 @@ "react-hot-loader/babel", "styled-components", ["@babel/plugin-proposal-decorators", { "legacy": true }], + "@babel/plugin-syntax-dynamic-import" ] } \ No newline at end of file diff --git a/README.md b/README.md index 81639a6..84750c6 100644 --- a/README.md +++ b/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) diff --git a/config.json b/config.json index ca15403..ba036d4 100644 --- a/config.json +++ b/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" diff --git a/config/webpack.common.js b/config/webpack.common.js index 9b168a1..e6785fa 100644 --- a/config/webpack.common.js +++ b/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([{ diff --git a/package-lock.json b/package-lock.json index d98e64d..427bdbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -353,8 +353,7 @@ "@babel/helper-plugin-utils": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz", - "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==", - "dev": true + "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==" }, "@babel/helper-regex": { "version": "7.4.4", @@ -527,6 +526,14 @@ "@babel/helper-plugin-utils": "7.0.0" } }, + "@babel/plugin-syntax-dynamic-import": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz", + "integrity": "sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==", + "requires": { + "@babel/helper-plugin-utils": "7.0.0" + } + }, "@babel/plugin-syntax-json-strings": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz", @@ -8635,6 +8642,14 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-loadable": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz", + "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==", + "requires": { + "prop-types": "15.7.2" + } + }, "react-redux": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz", diff --git a/package.json b/package.json index 5490dc8..d429609 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/PageLoading.jsx b/src/components/PageLoading.jsx index d762cfe..cf6b87e 100644 --- a/src/components/PageLoading.jsx +++ b/src/components/PageLoading.jsx @@ -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; diff --git a/src/index.js b/src/index.js index c767f07..ff41937 100644 --- a/src/index.js +++ b/src/index.js @@ -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 { {/* */} - + - - + + {/* */}