升级依赖，添加性能监控，修改渲染进程打包时压缩配置

umbrella22
.electron-vue/webpack.renderer.config.js
package-lock.json
package.json
src/renderer/permission.js
src/renderer/tools/performance.js
src/renderer/tools/timer.js
--- a/.electron-vue/webpack.renderer.config.js
查看文件 @92de62d
+++ b/.electron-vue/webpack.renderer.config.js
查看文件 @92de62d
@@ -13,7 +13,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader')
 const HappyPack = require('happypack')
 const HappyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
@@ -82,9 +81,11 @@ let rendererConfig = {
       },
       {
         test: /\.vue$/,
-        use: {
+        use: [ {
           loader: 'vue-loader',
           options: {
+            cacheDirectory: 'node_modules/.cache/vue-loader',
+            cacheIdentifier: '7270960a',
             extractCSS: process.env.NODE_ENV === 'production',
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
@@ -92,7 +93,7 @@ let rendererConfig = {
               less: 'vue-style-loader!css-loader!less-loader'
             }
           }
-        }
+        }]
       },
       {
         test: /\.svg$/,
@@ -172,7 +173,6 @@ let rendererConfig = {
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
-    new HardSourceWebpackPlugin(),
     new HappyPack({
       id: 'HappyRendererBabel',
       loaders: [{
@@ -243,6 +243,14 @@ if (process.env.NODE_ENV === 'production') {
         terserOptions: {
           warnings: false,
           compress: {
+            hoist_funs: false,
+            hoist_props: false,
+            hoist_vars: false,
+            inline: false,
+            loops: false,
+            dead_code: true,
+            booleans: true,
+            if_return: true,
             warnings: false,
             drop_console: true,
             drop_debugger: true,
--- a/package-lock.json
查看文件 @92de62d
+++ b/package-lock.json
查看文件 @92de62d
--- a/package.json
查看文件 @92de62d
+++ b/package.json
查看文件 @92de62d
@@ -75,7 +75,7 @@
     "electron-updater": "^4.3.1",
     "element-ui": "^2.13.2",
     "express": "^4.17.1",
-    "fs-extra": "^9.0.0",
+    "fs-extra": "^9.0.1",
     "js-cookie": "^2.2.1",
     "nedb": "^1.8.0",
     "nprogress": "^0.2.0",
@@ -112,13 +112,14 @@
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.1.0",
     "babel-minify-webpack-plugin": "^0.3.1",
+    "cache-loader": "^4.1.0",
     "cfonts": "^2.8.2",
     "chalk": "^4.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.3",
     "del": "^5.1.0",
-    "electron": "^7.3.0",
+    "electron": "^7.3.1",
     "electron-builder": "^22.7.0",
     "electron-devtools-installer": "^3.0.0",
     "eslint": "^6.8.0",
@@ -143,7 +144,7 @@
     "split2": "^3.1.1",
     "style-loader": "^1.2.1",
     "svg-sprite-loader": "^4.3.0",
-    "terser-webpack-plugin": "^3.0.2",
+    "terser-webpack-plugin": "^3.0.3",
     "through2-filter": "^3.0.0",
     "url-loader": "^4.1.0",
     "vue-html-loader": "^1.2.4",
--- a/src/renderer/permission.js
查看文件 @92de62d
+++ b/src/renderer/permission.js
查看文件 @92de62d
@@ -2,9 +2,13 @@
 import router from './router'
 import store from './store'
 import { Message } from 'element-ui'
+import Performance from '@/tools/performance'
 const whiteList = ['/login'] // 不重定向白名单
+var end = null
+
 router.beforeEach((to, from, next) => {
+  end = Performance.startExecute(`${from.path} => ${to.path} 路由耗时`) /// 路由性能监控
   if (store.getters.token) {
     if (to.path === '/login') {
       next({ path: '/' })
@@ -29,6 +33,9 @@ router.beforeEach((to, from, next) => {
       next('/login')
     }
   }
+  setTimeout(() => {
+    end()
+  }, 0)
 })
-router.afterEach(() => {})
+router.afterEach(() => { })
--- a/src/renderer/tools/performance.js 0 → 100644
查看文件 @92de62d
+++ b/src/renderer/tools/performance.js 0 → 100644
查看文件 @92de62d
+/**
+ * 性能工具
+ * 1. 计算方法执行时间
+ * @returns {void}
+ * @date 2019-11-29
+ */
+import Timer from './timer'
+class Performance {
+  /**
+     * 计算情况
+     * @returns {Function}  执行返回值获取时间信息
+     * @date 2019-11-29
+     */
+  startExecute (name = '') {
+    const timer = Timer.start()
+    const usedJSHeapSize = this.getMemoryInfo().usedJSHeapSize
+    return (name2 = '') => {
+      const executeTime = timer.stop()
+      const endMemoryInfo = this.getMemoryInfo()
+      console.log('%cPerformance%c \n1. 执行方法：%c%s%c\n2. 执行耗时： %c%sms%c \n3. 内存波动：%sB \n4. 已分配内存： %sMB \n5. 已使用内存：%sMB \n6. 剩余内存： %sMB',
+        'padding: 2px 4px 2px 4px; background-color: #4caf50; color: #fff; border-radius: 4px;', '',
+        'color: #ff6f00', `${name} ${name2}`, '',
+        'color: #ff6f00', executeTime, '',
+        endMemoryInfo.usedJSHeapSize - usedJSHeapSize,
+        this.toMBSize(endMemoryInfo.jsHeapSizeLimit),
+        this.toMBSize(endMemoryInfo.usedJSHeapSize),
+        this.toMBSize(endMemoryInfo.totalJSHeapSize)
+      )
+    }
+  }
+
+  /**
+     * 获取内存信息
+     * @returns {void}
+     * @date 2019-11-29
+     */
+  getMemoryInfo () {
+    let memoryInfo = {}
+    if (window.performance && window.performance.memory) {
+      memoryInfo = window.performance.memory
+    }
+    return memoryInfo
+  }
+
+  /**
+     * 转化为MB
+     * @returns {void}
+     * @date 2019-11-29
+     */
+  toMBSize (byteSize) {
+    return (byteSize / (1024 * 1024)).toFixed(1)
+  }
+}
+
+export default new Performance()
--- a/src/renderer/tools/timer.js 0 → 100644
查看文件 @92de62d
+++ b/src/renderer/tools/timer.js 0 → 100644
查看文件 @92de62d
+/* eslint-disable no-return-assign */
+/**
+ * 计时器
+ * 支持链式调用
+ * timeout()
+ *  .then(()=>{
+ *     return inTheEnd();
+ *   })
+ *  .then(()=>{
+ *      return inTheEnd();
+ *   });
+ *
+ * @date 2019-11-25
+ */
+class Timer {
+  /**
+     * 延时操作
+     * @returns {void}
+     * @date 2019-11-25
+     */
+  timeout (interval, args) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(args)
+      }, interval)
+    })
+  }
+
+  /**
+     * 等待代码片段执行完毕后再执行
+     * @returns {void}
+     * @date 2019-11-25
+     */
+  inTheEnd () {
+    return this.timeout(0)
+  }
+
+  /**
+     * 循环定时, 执行回调后再继续下一轮循环
+     * @param {Number} interval 执行间隔
+     * @param {Function} [callback] 回调
+     * @returns {Object}
+     * @date 2019-11-25
+     */
+  interval (interval, callback) {
+    this.timeout(interval)
+      .then(() => {
+        typeof callback === 'function' &&
+          callback() !== false &&
+          this.interval(interval, callback)
+      })
+    return { then: c => callback = c }
+  }
+
+  /**
+     * 计时，单位毫秒
+     * @returns {void}
+     * @date 2019-11-29
+     */
+  start () {
+    const startDate = new Date()
+    return {
+      stop () {
+        const stopDate = new Date()
+        return stopDate.getTime() - startDate.getTime()
+      }
+    }
+  }
+}
+
+export default new Timer()