chore: 使用v-chart cdn 以减小构建体积

ly525
1 parent d08ebdff
Showing 9 changed files with 31 additions and 25 deletions
back-end/h5-api/views/engine.ejs
front-end/h5/public/index.html
front-end/h5/src/components/core/plugins/charts/chart-mixin.js
front-end/h5/src/components/core/plugins/charts/chart-model.js
front-end/h5/src/components/core/plugins/charts/chart-model.ts
front-end/h5/src/components/core/plugins/charts/line.js
front-end/h5/src/components/core/plugins/lbp-form-button.js
front-end/h5/src/engine-entry.js
front-end/h5/vue.config.js
@@ -19,11 +19,16 @@
   <meta content="black" name="apple-mobile-web-app-status-bar-style">
   <meta content="telephone=no" name="format-detection">
   <meta content="email=no" name="format-detection">
-  <script src="/third-libs/vue.js"></script>
-  <link rel="stylesheet" href="/third-libs/animate.min.css">
-  <link rel="stylesheet" href="/third-libs/swiper.min.css">
-  <script src="/third-libs/swiper.min.js"></script>
-  <script src="/third-libs/swiper-animation.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/dist/css/swiper.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/swiper/dist/js/swiper.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/swiper-animation@2.0.2/build/swiper-animation.min.js"></script>
+  <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" async></script> -->
+  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
   <script>window.__work = <%- JSON.stringify(work) %></script>
   <script src="/engine-assets/engine.umd.min.js"></script>
   <style>
@@ -25,6 +25,10 @@
     </style>
     <!-- <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> -->
     <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js" async></script>
+    <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" async></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
     <script>
       // Note: 增加html userAgent标记，
       // windows启用下仿mac的滚动条样式。
-import echarts from 'echarts/lib/echarts'
 import debounce from 'lodash/debounce'
 import { addListener, removeListener } from 'resize-detector'
 import { LineChart } from './chart-model'
@@ -5,7 +5,7 @@
  * TODO X轴 formatter：1.只针对 X轴，不针对 tooltip 2. tooltip 和 X轴同时生效
  * TODO legend(series) 到多Y轴的映射
  */
-import _ from 'lodash'
+import { uniqBy } from 'lodash'
  
 export class LineChart {
   constructor ({ xAxis = [], yIndexMap = {}, dataset }) {
@@ -65,7 +65,7 @@ export class LineChart {
      */
   getLegends () {
     const legendKey = this.keys.legend
-    const allLegends = _.uniqBy(this.dataset, legendKey).map((item) => item[legendKey])
+    const allLegends = uniqBy(this.dataset, legendKey).map((item) => item[legendKey])
     const legends = Array.from(new Set(allLegends))
     return legends
   }
@@ -5,7 +5,7 @@
  * TODO X轴 formatter：1.只针对 X轴，不针对 tooltip 2. tooltip 和 X轴同时生效
  * TODO legend(series) 到多Y轴的映射
  */
-import _ from "lodash";
+import { uniqBy } from "lodash";
 // import numeral from "numeral";
  
 /**
@@ -249,7 +249,7 @@ export class LineChart {
    */
   getLegends(): string[] {
     const legendKey = this.keys.legend;
-    const allLegends: string[] = _.uniqBy(this.dataset, legendKey).map(
+    const allLegends: string[] = uniqBy(this.dataset, legendKey).map(
       (item: uniqByResultType) => item[legendKey]
     );
     const legends: string[] = Array.from(new Set(allLegends));
-import VeLine from 'v-charts/lib/line.common'
-import VeRadar from 'v-charts/lib/radar.common'
-import VePie from 'v-charts/lib/pie.common'
-import VeHistogram from 'v-charts/lib/histogram.common'
-import VeFunnel from 'v-charts/lib/funnel.common'
 import PropTypes from '@luban-h5/plugin-common-props'
-import 'echarts/lib/component/legend'
-import 'echarts/lib/component/markLine'
-import 'echarts/lib/component/markPoint'
-import 'echarts/lib/component/markArea'
 import Parser from '@/utils/excel-parser'
  
+const {
+  VeLine,
+  VeRadar,
+  VePie,
+  VeHistogram,
+  VeFunnel
+} = window.VeIndex
+
 // const title = str => str.slice(0, 1).toUpperCase() + str.slice(1)
  
 export default {
 // https://github.com/luban-h5-components/plugin-common-props
 import PropTypes from '@luban-h5/plugin-common-props'
+import Toast from 'vant/lib/toast'
+import 'vant/lib/toast/style'
  
 export default {
   render () {
@@ -55,14 +57,13 @@ export default {
       // #!zh: data-type=lbp-form-input 在 lbp-form-input 组件中定义
       let inputs = document.querySelectorAll("[data-type^='lbp-form-input']")
       if (!inputs.length) return
-      const self = this
       let formData = new FormData()
       inputs.forEach(input => formData.append(input.dataset.uuid, input.value))
       const req = new XMLHttpRequest()
       req.onreadystatechange = function () {
         if (req.readyState === 4) {
           const message = req.status === 200 ? '提交成功' : '提交失败'
-          self.$message.info(message)
+          Toast(message)
         }
       }
  
@@ -14,9 +14,6 @@
  */
  
 import Vue from 'vue'
-// import 'font-awesome/css/font-awesome.min.css'
-import message from 'ant-design-vue/lib/message' // 加载 JS
-import 'ant-design-vue/lib/message/style/css' // 加载 CSS
  
 import { pluginsList } from 'core/plugins/index.js'
 import { PAGE_MODE } from 'core/constants/work.js'
@@ -25,7 +22,6 @@ import RenderPreview from &#39;core/editor/canvas/preview&#39;
 import NodeWrapper from 'core/preview/node-wrapper.js'
  
 Vue.config.productionTip = true
-Vue.prototype.$message = message
  
 const Engine = {
   name: 'engine',
@@ -55,6 +55,8 @@ const configureWebpack = {
     new webpack.ContextReplacementPlugin(/moment\/locale$/, /(zh-cn)$/)
   ],
   externals: {
+    echarts: 'echarts',
+    VeIndex: 'echarts'
   }
 }