feat: 按需加载脚本资源

public/index.html

@@ -78,7 +78,7 @@
   </style>
   <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
   <link href="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/editor/editor.main.css" rel="stylesheet">
-  <script src="https://cdn.bootcss.com/vue/2.6.10/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''  %>.js"></script>
+  <script src="https://cdn.bootcss.com/vue/2.6.10/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
   <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
   <!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
   <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
@@ -94,11 +94,6 @@
     <div class="inner two"></div>
     <div class="inner three"></div>
   </div>
-  <script> var require = { paths: { 'vs': 'https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs' }};</script>
-  <script src="https://cdn.bootcss.com/js-beautify/1.10.2/beautifier.min.js"></script>
-  <script src="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/loader.js"></script>
-  <script src="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/editor/editor.main.nls.js"></script>
-  <script src="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/editor/editor.main.js"></script>
 </body>
 
 </html>

src/utils/loadBeautifier.js

@@ -0,0 +1,26 @@
+import loadScript from './loadScript'
+import ELEMENT from 'element-ui'
+
+let beautifierObj
+
+export default function loadBeautifier(cb) {
+  if (beautifierObj) {
+    cb(beautifierObj)
+    return
+  }
+
+  const loading = ELEMENT.Loading.service({
+    fullscreen: true,
+    lock: true,
+    text: '格式化资源加载中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(255, 255, 255, 0.5)'
+  })
+
+  loadScript('https://cdn.bootcss.com/js-beautify/1.10.2/beautifier.min.js', () => {
+    loading.close()
+    // eslint-disable-next-line no-undef
+    beautifierObj = beautifier
+    cb(beautifierObj)
+  })
+}

src/utils/loadMonaco.js

@@ -0,0 +1,42 @@
+import { loadScriptQueue } from './loadScript'
+import ELEMENT from 'element-ui'
+
+// monaco-editor单例
+let monacoEidtor
+
+/**
+ * 动态加载monaco-editor cdn资源
+ * @param {Function} cb 回调，必填
+ */
+export default function loadMonaco(cb) {
+  if (monacoEidtor) {
+    cb(monacoEidtor)
+    return
+  }
+
+  const vs = 'https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs'
+
+  // 使用element ui实现加载提示
+  const loading = ELEMENT.Loading.service({
+    fullscreen: true,
+    lock: true,
+    text: '编辑器资源初始化中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(255, 255, 255, 0.5)'
+  })
+
+  !window.require && (window.require = {})
+  !window.require.paths && (window.require.paths = {})
+  window.require.paths.vs = vs
+
+  loadScriptQueue([
+    `${vs}/loader.js`,
+    `${vs}/editor/editor.main.nls.js`,
+    `${vs}/editor/editor.main.js`
+  ], () => {
+    loading.close()
+    // eslint-disable-next-line no-undef
+    monacoEidtor = monaco
+    cb(monacoEidtor)
+  })
+}

src/utils/loadScript.js

@@ -1,10 +1,16 @@
+/**
+ * 加载一个远程脚本
+ * @param {String} src 一个远程脚本
+ * @param {Function} callback 回调
+ */
 function loadScript(src, callback) {
   const cb = callback || (() => {})
   const $script = document.createElement('script')
   $script.src = src
   $script.id = src
+  $script.async = 1
   document.body.appendChild($script)
-  const onEnd = 'onload' in $script ? stdOnEnd : ieOnEnd
+  const onEnd = 'onload' in $script ? stdOnEnd.bind($script) : ieOnEnd.bind($script)
   onEnd($script)
 
   function stdOnEnd(script) {
@@ -27,4 +33,14 @@ function loadScript(src, callback) {
   }
 }
 
+/**
+ * 顺序加载一组远程脚本
+ * @param {Array} list 一组远程脚本
+ * @param {Function} cb 回调
+ */
+export function loadScriptQueue(list, cb) {
+  const first = list.shift()
+  list.length ? loadScript(first, () => loadScriptQueue(list, cb)) : loadScript(first, cb)
+}
+
 export default loadScript

src/views/index/FormDrawer.vue

@@ -76,9 +76,7 @@
   </div>
 </template>
 <script>
-import monaco from 'monaco'
 import { parse } from '@babel/parser'
-import beautifier from 'beautifier'
 import ClipboardJS from 'clipboard'
 import { saveAs } from 'file-saver'
 import {
@@ -88,6 +86,8 @@ import { makeUpJs } from '@/components/generator/js'
 import { makeUpCss } from '@/components/generator/css'
 import { exportDefault, beautifierConf, titleCase } from '@/utils/index'
 import ResourceDialog from './ResourceDialog'
+import loadMonaco from '@/utils/loadMonaco'
+import loadBeautifier from '@/utils/loadBeautifier'
 
 const editorObj = {
   html: null,
@@ -99,6 +99,8 @@ const mode = {
   js: 'javascript',
   css: 'css'
 }
+let beautifier
+let monaco
 
 export default {
   components: { ResourceDialog },
@@ -113,7 +115,8 @@ export default {
       isIframeLoaded: false,
       resourceVisible: false,
       scripts: [],
-      links: []
+      links: [],
+      monaco: null
     }
   },
   computed: {
@@ -122,7 +125,8 @@ export default {
     }
   },
   watch: {},
-  created() {},
+  created() {
+  },
   mounted() {
     window.addEventListener('keydown', this.preventDefaultSave)
     const clipboard = new ClipboardJS('.copy-btn', {
@@ -150,25 +154,30 @@ export default {
       }
     },
     onOpen() {
-      setTimeout(() => {
-        const { type } = this.generateConf
-        this.htmlCode = makeUpHtml(this.formData, type)
+      const { type } = this.generateConf
+      this.htmlCode = makeUpHtml(this.formData, type)
+      this.jsCode = makeUpJs(this.formData, type)
+      this.cssCode = makeUpCss(this.formData)
+
+      loadBeautifier(btf => {
+        beautifier = btf
         this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
-        this.jsCode = makeUpJs(this.formData, type)
         this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
-        this.cssCode = makeUpCss(this.formData)
         this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)
 
-        this.setEditorValue('editorHtml', 'html', this.htmlCode)
-        this.setEditorValue('editorJs', 'js', this.jsCode)
-        this.setEditorValue('editorCss', 'css', this.cssCode)
-        this.isIframeLoaded && this.runCode()
+        loadMonaco(val => {
+          monaco = val
+          this.setEditorValue('editorHtml', 'html', this.htmlCode)
+          this.setEditorValue('editorJs', 'js', this.jsCode)
+          this.setEditorValue('editorCss', 'css', this.cssCode)
+          this.isIframeLoaded && this.runCode()
+        })
       })
     },
     onClose() {},
     iframeLoad() {
       this.isIframeLoaded = true
-      this.jsCode && this.runCode()
+      monaco && this.jsCode && this.runCode()
     },
     setEditorValue(id, type, codeStr) {
       if (editorObj[type]) {

src/views/index/Home.vue

@@ -124,7 +124,6 @@
 import draggable from 'vuedraggable'
 import { debounce } from 'throttle-debounce'
 import { saveAs } from 'file-saver'
-import beautifier from 'beautifier'
 import ClipboardJS from 'clipboard'
 import render from '@/components/render/render'
 import FormDrawer from './FormDrawer'
@@ -148,7 +147,9 @@ import DraggableItem from './DraggableItem'
 import {
   getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
 } from '@/utils/db'
+import loadBeautifier from '@/utils/loadBeautifier'
 
+let beautifier
 const emptyActiveData = { style: {}, autosize: {} }
 let oldActiveId
 let tempActiveData
@@ -247,7 +248,9 @@ export default {
     if (formConfInDB) {
       this.formConf = formConfInDB
     }
-
+    loadBeautifier(btf => {
+      beautifier = btf
+    })
     const clipboard = new ClipboardJS('#copyNode', {
       text: trigger => {
         const codeStr = this.generateCode()

src/views/index/JsonDrawer.vue

@@ -25,11 +25,14 @@
 </template>
 
 <script>
-import monaco from 'monaco'
-import beautifier from 'beautifier'
 import { beautifierConf } from '@/utils/index'
 import ClipboardJS from 'clipboard'
 import { saveAs } from 'file-saver'
+import loadMonaco from '@/utils/loadMonaco'
+import loadBeautifier from '@/utils/loadBeautifier'
+
+let beautifier
+let monaco
 
 export default {
   components: {},
@@ -73,8 +76,15 @@ export default {
       }
     },
     onOpen() {
-      this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
-      this.setEditorValue('editorJson', this.beautifierJson)
+      loadBeautifier(btf => {
+        beautifier = btf
+        this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
+
+        loadMonaco(val => {
+          monaco = val
+          this.setEditorValue('editorJson', this.beautifierJson)
+        })
+      })
     },
     onClose() {},
     setEditorValue(id, codeStr) {

src/views/preview/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import load from '@/utils/loadScript'
+import { loadScriptQueue } from '@/utils/loadScript'
 
 const $previewApp = document.getElementById('previewApp')
 const childAttrs = {
@@ -9,17 +9,6 @@ const childAttrs = {
 
 window.addEventListener('message', init, false)
 
-function loadScriptQueue(list, cb) {
-  const first = list.shift()
-  if (list.length === 0) {
-    load(first, cb)
-  } else {
-    load(first, () => {
-      loadScriptQueue(list, cb)
-    })
-  }
-}
-
 function buildLinks(links) {
   let strs = ''
   links.forEach(url => {
@@ -41,7 +30,7 @@ function init(event) {
     $previewApp.innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
 
     if (Array.isArray(code.scripts) && code.scripts.length > 0) {
-      loadScriptQueue(JSON.parse(JSON.stringify(code.scripts)), () => {
+      loadScriptQueue(code.scripts, () => {
         newVue(attrs, code.js, code.html)
       })
     } else {

vue.config.js

@@ -44,9 +44,7 @@ module.exports = {
       vue: 'Vue',
       'vue-router': 'VueRouter',
       axios: 'axios',
-      'element-ui': 'ELEMENT',
-      monaco: 'monaco',
-      beautifier: 'beautifier'
+      'element-ui': 'ELEMENT'
     }
   },
   chainWebpack(config) {