From cf1f40ddadefd5b639e7f84f5d4494e5ada5e17e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Tue, 21 May 2019 10:50:10 +0800 Subject: [PATCH] perf[Tinymce]: dynamic import tinymce(#2102) --- public/index.html | 4 --- src/components/Tinymce/dynamicLoadScript.js | 39 +++++++++++++++++++++ src/components/Tinymce/index.vue | 20 +++++++++-- vue.config.js | 10 ------ 4 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 src/components/Tinymce/dynamicLoadScript.js diff --git a/public/index.html b/public/index.html index 9bb2d7fc..e9185009 100644 --- a/public/index.html +++ b/public/index.html @@ -9,10 +9,6 @@ <%= webpackConfig.name %> - - <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> - - <% } %>
diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js new file mode 100644 index 00000000..46a93290 --- /dev/null +++ b/src/components/Tinymce/dynamicLoadScript.js @@ -0,0 +1,39 @@ +const dynamicLoadScript = (src, callback) => { + const existingScript = document.getElementById(src) + const cb = callback || function() {} + + if (!existingScript) { + const script = document.createElement('script') + script.src = src // src url for the third-party library being loaded. + script.id = src + document.body.appendChild(script) + + const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd + onEnd(script, cb) + } + + if (existingScript && cb) cb(null, existingScript) + + function stdOnEnd(script, cb) { + script.onload = function() { + // this.onload = null here is necessary + // because even IE9 works not like others + this.onerror = this.onload = null + cb(null, script) + } + script.onerror = function() { + this.onerror = this.onload = null + cb(new Error('Failed to load ' + src), script) + } + } + + function ieOnEnd(script, cb) { + script.onreadystatechange = function() { + if (this.readyState !== 'complete' && this.readyState !== 'loaded') return + this.onreadystatechange = null + cb(null, script) // there is no way to catch loading errors in IE8 + } + } +} + +export default dynamicLoadScript diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index 08ef768d..670a0e53 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -15,6 +15,10 @@ import editorImage from './components/EditorImage' import plugins from './plugins' import toolbar from './toolbar' +import load from './dynamicLoadScript' + +// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one +const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' export default { name: 'Tinymce', @@ -91,10 +95,12 @@ export default { } }, mounted() { - this.initTinymce() + this.init() }, activated() { - this.initTinymce() + if (window.tinymce) { + this.initTinymce() + } }, deactivated() { this.destroyTinymce() @@ -103,6 +109,16 @@ export default { this.destroyTinymce() }, methods: { + init() { + // dynamic load tinymce from cdn + load(tinymceCDN, (err) => { + if (err) { + this.$message.error(err.message) + return + } + this.initTinymce() + }) + }, initTinymce() { const _this = this window.tinymce.init({ diff --git a/vue.config.js b/vue.config.js index 41a7f600..c5e31642 100644 --- a/vue.config.js +++ b/vue.config.js @@ -57,16 +57,6 @@ module.exports = { } }, chainWebpack(config) { - const cdn = { - // inject tinymce into index.html - // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one - js: ['https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'] - } - config.plugin('html') - .tap(args => { - args[0].cdn = cdn - return args - }) config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test