feat: add prerender feature

Author: yugasun

README.md

@@ -40,6 +40,9 @@ npm run dev
 # build
 npm run build
 
+# build with localStorage cache
+npm run build:cache
+
 # deploy for Github page
 npm run deploy
 
@@ -48,6 +51,9 @@ npm run docker:build
 
 # run docker image in container, after this you can visit demo by: http://localhost:8080
 npm run docker:run
+
+# run into current docker container
+npm run docker:exec
 ```
 
 ## Feature
@@ -60,7 +66,7 @@ npm run docker:run
 - [x] Frontend data mock demo using [mockjs](https://github.com/nuysoft/Mock).
 - [x] Docker deploy.
 - [x] _**Refactor with Typescript**_.
-- [ ] Integrated with [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) for pre-render.
+- [x] Integrated with [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) for pre-render.
 
 ## Demo
 

README.zh-CN.md

@@ -41,6 +41,9 @@ npm run dev
 # 构建
 npm run build
 
+# 构建带有 localStorage 缓存版本
+npm run build:cache
+
 # 发布到 Github 页面
 npm run deploy
 
@@ -49,6 +52,9 @@ npm run docker:build
 
 # 运行 docker 镜像，运行后，dome可以直接访问 http://localhost:8080
 npm run docker:run
+
+# 进入当前运行的 docker 镜像
+npm run docker:exec
 ```
 
 ## 功能
@@ -61,7 +67,7 @@ npm run docker:run
 - [x] 使用 [mockjs](https://github.com/nuysoft/Mock) 进行前端数据模拟。
 - [x] Docker部署方案.
 - [x] _**使用 Typescript 重构**_.
-- [ ] 集成 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) 进行预渲染.
+- [x] 集成 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) 进行预渲染.
 
 ## Demo
 

package.json

@@ -1,16 +1,17 @@
 {
   "name": "x-chart",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "description": "Draggable & resizable data visualization dashboard",
   "author": "yugasun <yuga_sun@163.com>",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:cache": "cross-env CACHE=true vue-cli-service build",
+    "build:git-page": "cross-env GIT_PAGE=true vue-cli-service build",
     "test": "npm run lint",
     "lint": "vue-cli-service lint",
     "deploy": "npm run build:git-page && gh-pages -d dist --remote origin",
-    "build:git-page": "cross-env GIT_PAGE=true vue-cli-service build",
     "docker:build": "docker build -t x-chart .",
     "docker:exec": "docker exec -it x-chart bash",
     "docker:run": "docker run -itd -p 8080:80 --name=x-chart x-chart"
@@ -48,6 +49,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "gh-pages": "^2.0.1",
     "node-sass": "^4.9.0",
+    "prerender-spa-plugin": "^3.4.0",
     "sass-loader": "^7.0.1",
     "typescript": "^3.2.1",
     "uglifyjs-webpack-plugin": "^2.0.1",

src/mock/index.ts

@@ -2,7 +2,7 @@ import Mock from 'mockjs';
 import dashboardAPI from './dashboard';
 
 Mock.setup({
-  timeout: '350-600',
+  timeout: '10-100',
 });
 
 // dashboard相关

src/template/index.cache.html

@@ -21,7 +21,7 @@
 
     <script>
       <% var resources = [];
-      var keys = ["chunk_vendors", "app"];
+      var keys = ["chunkLibs", "chunkElementUI", "app"];
       var dependecies = [
         0,
         [keys[0]],

vue.config.js

@@ -1,17 +1,40 @@
 const path = require('path');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
+const PrerenderSPAPlugin = require('prerender-spa-plugin');
 const pkg = require('./package.json');
 
 const prod = process.env.NODE_ENV === 'production';
+const cache = process.env.CACHE === 'true';
 const buildForGitPage = process.env.GIT_PAGE;
 
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+const splitChunks = {
+  chunks: 'all',
+  cacheGroups: {
+    libs: {
+      name: 'chunkLibs',
+      test: /[\\/]node_modules[\\/]/,
+      priority: 10,
+      chunks: 'initial',
+    },
+    elementUI: {
+      name: 'chunkElementUI',
+      priority: 20,
+      test: /[\\/]node_modules[\\/]element-ui[\\/]/,
+    },
+  },
+};
+
 module.exports = {
   parallel: true,
   publicPath: buildForGitPage ? '/x-chart/' : '/',
   runtimeCompiler: true,
   configureWebpack: {
     optimization: {
+      splitChunks,
       minimizer: prod
         ? [
           new UglifyJsPlugin({
@@ -24,32 +47,39 @@ module.exports = {
         ]
         : [],
     },
+    plugins: [
+      new PrerenderSPAPlugin({
+        staticDir: resolve('dist'),
+        routes: ['/'],
+      }),
+    ],
   },
   chainWebpack: (config) => {
     // modify html-webpack-html configure
     config.plugin('html').tap((options) => {
       options[0].title = pkg.name;
-      options[0].template = path.join(__dirname, 'src/template/index.html');
-      options[0].favicon = path.join(__dirname, 'public/favicon.ico');
-      if (prod) {
+      options[0].template = resolve('src/template/index.html');
+      options[0].favicon = resolve('public/favicon.ico');
+
+      // only set cache = true and prod mode will use cache template
+      if (prod && cache) {
         options[0].inject = false;
-        options[0].template = path.join(
-          __dirname,
-          'src/template/index.cache.html',
-        );
+        options[0].template = resolve('src/template/index.cache.html');
         options[0].gitPage = buildForGitPage;
       }
       return options;
     });
 
     // modify url-loader for fonts
-    config.module.rule('fonts').use('url-loader').loader('url-loader').tap((options) => {
-      options.limit = 10000;
-      // modify publicPath for git-pages
-      options.publicPath = buildForGitPage
-        ? '/x-chart/'
-        : '/';
-      return options;
-    });
+    config.module
+      .rule('fonts')
+      .use('url-loader')
+      .loader('url-loader')
+      .tap((options) => {
+        options.limit = 10000;
+        // modify publicPath for git-pages
+        options.publicPath = buildForGitPage ? '/x-chart/' : '/';
+        return options;
+      });
   },
 };