[新增功能](master): 打包优化

package.json

@@ -37,10 +37,8 @@
     "axios": "^0.21.1",
     "clipboard": "2.0.4",
     "codemirror": "^5.49.2",
-    "connect": "3.6.6",
     "core-js": "^2.6.12",
     "echarts": "^4.2.1",
-    "echarts-gl": "^1.1.1",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.15.6",
     "file-saver": "1.3.8",
@@ -60,7 +58,6 @@
     "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-echarts": "^5.0.0-beta.0",
-    "vue-highlightjs": "^1.3.3",
     "vue-image-crop-upload": "^2.5.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
@@ -87,6 +84,7 @@
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
+    "compression-webpack-plugin": "5.0.2",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/components/Echarts/Line3D.vue

@@ -1,96 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import 'echarts-gl'
-
-require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    window.removeEventListener('resize', this.__resizeHandler)
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      const data = []
-      for (let t = 0; t < 25; t += 0.001) {
-        const x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)
-        const y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)
-        const z = t + 2.0 * Math.sin(75 * t)
-        data.push([x, y, z])
-      }
-      this.chart.setOption({
-        tooltip: {},
-        backgroundColor: '#fff',
-        visualMap: {
-          show: false,
-          dimension: 2,
-          min: 0,
-          max: 30,
-          inRange: {
-            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
-          }
-        },
-        xAxis3D: {
-          type: 'value'
-        },
-        yAxis3D: {
-          type: 'value'
-        },
-        zAxis3D: {
-          type: 'value'
-        },
-        grid3D: {
-          viewControl: {
-            projection: 'orthographic'
-          }
-        },
-        series: [{
-          type: 'line3D',
-          data: data,
-          lineStyle: {
-            width: 4
-          }
-        }]
-      })
-    }
-  }
-}
-</script>

src/components/Echarts/WordCloud.vue

@@ -1,192 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts-wordcloud')
-require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    window.removeEventListener('resize', this.__resizeHandler)
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      const data = [{
-        'name': '花鸟市场',
-        'value': 1446
-      },
-      {
-        'name': '汽车',
-        'value': 928
-      },
-      {
-        'name': '视频',
-        'value': 906
-      },
-      {
-        'name': '电视',
-        'value': 825
-      },
-      {
-        'name': 'Lover Boy',
-        'value': 514
-      },
-      {
-        'name': '动漫',
-        'value': 486
-      },
-      {
-        'name': '音乐',
-        'value': 53
-      },
-      {
-        'name': '直播',
-        'value': 163
-      },
-      {
-        'name': '广播电台',
-        'value': 86
-      },
-      {
-        'name': '戏曲曲艺',
-        'value': 17
-      },
-      {
-        'name': '演出票务',
-        'value': 6
-      },
-      {
-        'name': '给陌生的你听',
-        'value': 1
-      },
-      {
-        'name': '资讯',
-        'value': 1437
-      },
-      {
-        'name': '商业财经',
-        'value': 422
-      },
-      {
-        'name': '娱乐八卦',
-        'value': 353
-      },
-      {
-        'name': '军事',
-        'value': 331
-      },
-      {
-        'name': '科技资讯',
-        'value': 313
-      },
-      {
-        'name': '社会时政',
-        'value': 307
-      },
-      {
-        'name': '时尚',
-        'value': 43
-      },
-      {
-        'name': '网络奇闻',
-        'value': 15
-      },
-      {
-        'name': '旅游出行',
-        'value': 438
-      },
-      {
-        'name': '景点类型',
-        'value': 957
-      },
-      {
-        'name': '国内游',
-        'value': 927
-      },
-      {
-        'name': '远途出行方式',
-        'value': 908
-      },
-      {
-        'name': '酒店',
-        'value': 693
-      },
-      {
-        'name': '关注景点',
-        'value': 611
-      },
-      {
-        'name': '旅游网站偏好',
-        'value': 512
-      },
-      {
-        'name': '出国游',
-        'value': 382
-      }]
-      this.chart.setOption({
-        backgroundColor: '#fff',
-        tooltip: {
-          show: false
-        },
-        series: [{
-          type: 'wordCloud',
-          gridSize: 1,
-          sizeRange: [12, 55],
-          rotationRange: [-45, 0, 45, 90],
-          textStyle: {
-            normal: {
-              color: function() {
-                return 'rgb(' +
-                  Math.round(Math.random() * 255) +
-                  ', ' + Math.round(Math.random() * 255) +
-                  ', ' + Math.round(Math.random() * 255) + ')'
-              }
-            }
-          },
-          left: 'center',
-          top: 'center',
-          right: null,
-          bottom: null,
-          data: data
-        }]
-      })
-    }
-  }
-}
-</script>

src/main.js

@@ -5,9 +5,6 @@ import Cookies from 'js-cookie'
 import 'normalize.css/normalize.css'
 
 import Element from 'element-ui'
-//
-import mavonEditor from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
 
 // 数据字典
 import dict from './components/Dict'
@@ -16,24 +13,18 @@ import dict from './components/Dict'
 import checkPer from '@/utils/permission'
 import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
+
 // global css
 import './assets/styles/index.scss'
 
-// 代码高亮
-import VueHighlightJS from 'vue-highlightjs'
-import 'highlight.js/styles/atom-one-dark.css'
-
 import App from './App'
 import store from './store'
 import router from './router/routers'
 
 import './assets/icons' // icon
 import './router/index' // permission control
-import 'echarts-gl'
 
 Vue.use(checkPer)
-Vue.use(VueHighlightJS)
-Vue.use(mavonEditor)
 Vue.use(permission)
 Vue.use(dict)
 Vue.use(Element, {

src/views/components/Echarts.vue

@@ -34,21 +34,16 @@
         </el-col>
       </el-row>
       <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="8">
+        <el-col :xs="24" :sm="24" :lg="12">
           <div class="chart-wrapper">
             <graph />
           </div>
         </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
+        <el-col :xs="24" :sm="24" :lg="12">
           <div class="chart-wrapper">
             <sankey />
           </div>
         </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <line3-d />
-          </div>
-        </el-col>
       </el-row>
       <el-row :gutter="12">
         <el-col :span="12">
@@ -62,11 +57,6 @@
           </div>
         </el-col>
       </el-row>
-      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-        <div class="chart-wrapper">
-          <word-cloud />
-        </div>
-      </el-row>
       <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <div class="chart-wrapper">
           <category />
@@ -86,10 +76,8 @@ import Sunburst from '@/components/Echarts/Sunburst'
 import Graph from '@/components/Echarts/Graph'
 import Sankey from '@/components/Echarts/Sankey'
 import Scatter from '@/components/Echarts/Scatter'
-import Line3D from '@/components/Echarts/Line3D'
 import Category from '@/components/Echarts/Category'
 import Point from '@/components/Echarts/Point'
-import WordCloud from '@/components/Echarts/WordCloud'
 
 export default {
   name: 'Echarts',
@@ -104,9 +92,7 @@ export default {
     Rich,
     ThemeRiver,
     Sankey,
-    Line3D,
-    Scatter,
-    WordCloud
+    Scatter
   }
 }
 </script>

src/views/components/MarkDown.vue

@@ -11,8 +11,14 @@
 <script>
 import { upload } from '@/utils/upload'
 import { mapGetters } from 'vuex'
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
 export default {
   name: 'Markdown',
+  components: {
+    mavonEditor
+  },
   data() {
     return {
       height: document.documentElement.clientHeight - 200 + 'px'

src/views/monitor/log/errorLog.vue

@@ -43,7 +43,7 @@
       </el-table-column>
     </el-table>
     <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
-      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
+      <pre>{{ errorInfo }}</pre>
     </el-dialog>
     <!--分页组件-->
     <pagination />

src/views/system/timing/log.vue

@@ -41,7 +41,7 @@
       <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
     </el-table>
     <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
-      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
+      <pre>{{ errorInfo }}</pre>
     </el-dialog>
     <!--分页组件-->
     <el-pagination

vue.config.js

@@ -1,6 +1,7 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
+const CompressionPlugin = require('compression-webpack-plugin')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
@@ -51,7 +52,16 @@ module.exports = {
         '@': resolve('src'),
         '@crud': resolve('src/components/Crud')
       }
-    }
+    },
+    plugins: [
+      // https://www.ydyno.com/archives/1260.html 使用gzip解压缩静态文件
+      new CompressionPlugin({
+        test: /\.(js|css|html)?$/i, // 压缩文件格式
+        filename: '[path].gz[query]', // 压缩后的文件名
+        algorithm: 'gzip', // 使用gzip压缩
+        minRatio: 0.8 // 压缩率小于1才会压缩
+      })
+    ]
   },
   chainWebpack(config) {
     config.plugins.delete('preload') // TODO: need test