Vue动态加载外部脚本优化实践：tinymce示例

vue

59 浏览量更新于2023-05-06 1 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

Vue实现动态加载脚本是一种在前端开发中优化性能、减少页面初始化时体积的技术，特别是在像tinymce这样的第三方库应用中。传统的静态导入或npm安装会导致Vue项目打包后的体积增大，动态加载则可以在需要时按需加载，提高用户体验。文章首先提到，在Vue中动态加载tinymce脚本的原因是避免不必要的资源下载，因为并非所有场景都需要富文本编辑功能。通过动态加载，只有当用户真正需要使用tinymce时，脚本才会被加载，从而减少初始页面加载时间。这通常通过创建一个名为`dynamicLoadScript.js`的自定义模块来实现，该模块包含一个数组（`callbacks`）用于存储回调函数，以及一个`loadTinymce`方法来检测tinymce脚本是否已成功加载。 `loadTinymce`方法检查`window`对象上是否存在`tinymce`属性，这是判断tinymce脚本是否加载完成的一个常见策略。其他库的加载只需修改这段逻辑以匹配库的具体API。例如，如果要检查其他库，可以查找对应的API对象或特定事件。在动态加载过程中，如果目标脚本的`<script>`标签不存在，会动态创建一个新的`<script>`标签，设置其`src`属性为所需库的URL，并将其添加到`<body>`中。同时，将回调函数添加到`callbacks`数组中，以便后续在脚本加载完成后执行。最后，`dynamicLoadScript`函数接受两个参数：`src`（脚本的URL）和`callback`（可选的回调函数）。如果提供了回调，它会被用作默认的处理函数。这个函数模式非常灵活，可以用于加载和管理任何动态脚本，只要稍作调整，就能适应不同的库和需求。总结来说，动态加载脚本在Vue中是一个实用的策略，可以帮助开发者控制资源的加载时机，提升性能，特别是在处理大型或非必需的第三方库时。通过`dynamicLoadScript`这样的模块，可以更好地管理和优化JavaScript资源的加载流程。

资源详情

资源推荐

vue如何实现动态加载脚本如何实现动态加载脚本

这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学

习价值,需要的朋友可以参考下

今天在研究，tinymce富文本编辑器怎样在vue中使用，然后看到其它框架上的使用方法，它是动态加载tinymce脚本的，若果

在本地引入静态文件或者，npm安装都会导致vue项目打包体积过大，这种动态脚本引入方式，是一个不错的实践，下面上的

代码块叫 dynamicLoadScript 顾名思义，动态加载脚本，这个js只对加载tinymce有效，不过要想加载其它脚本，稍微做一下

改动即可

我们可以建立一个dynamicLoadScript.js文件

上代码：dynamicLoadScript.js

let callbacks = [];//放一个数组放置回调函数

function loadedTinymce() {//检测脚本是否加载好的方法如果tinymce加载好了，window对象上会有tinymce属性若要加载其

它脚本只需要将此判断改一下即可

// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144

// check is successfully downloaded script

return window.tinymce

}

const dynamicLoadScript = (src, callback) => {

const existingScript = document.getElementById(src);//获取script标签元素

const cb = callback || function() {};//拿到回调函数

if (!existingScript) {//若没有这个脚本的script标签

const script = document.createElement('script');//创建一个script标签

script.src = src // src url for the third-party library being loaded.

script.id = src

document.body.appendChild(script)

callbacks.push(cb);//将回调函数加到callbacks数组中

const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//若是标准浏览器有onload属性若是ie浏览器没有onload属性

onEnd(script)

}

if (existingScript && cb) {//若此script标签存在并且有回调函数

if (loadedTinymce()) {//检测是否有tinymce属性

cb(null, existingScript);//若有tinymce对象，则执行回调函数

} else {

callbacks.push(cb);//若没有tinymce对象，则将回调函数加到回调函数数组内

}

function stdOnEnd(script) {//标准浏览器加载好脚本后

script.onload = function() {//脚本加载成功后

// this.onload = null here is necessary

// because even IE9 works not like others

this.onerror = this.onload = null;//将script标签的onload和onerror属性置空

for (const cb of callbacks) {//执行回调函数之所以用数组放置回调函数是应对我仍然事件的发生

cb(null, script)

}

callbacks = null;//将callbacks置空

}

script.onerror = function() {//脚本加载失败后

this.onerror = this.onload = null;//将script标签的onload和onerror置空覆盖原生的onload事件和nerror事件

cb(new Error('Failed to load ' + src), script);//脚本加载错误后执行回调函数，返回报错信息

}

function ieOnEnd(script) {//若是ie浏览器

script.onreadystatechange = function() {//脚本加载成功后

if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//脚本没加载好则不执行回调函数 ie浏览器会自动报

错

this.onreadystatechange = null;//若加载成功

for (const cb of callbacks) {//执行回调函数

cb(null, script) // there is no way to catch loading errors in IE8

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38703669

粉丝: 8
资源: 879

会员权益专享

Vue动态加载外部脚本优化实践：tinymce示例

vue动态加载外部依赖js代码实现

动态给head添加script

Vue 实现从文件中获取文本信息的方法详解

vue 动态远程链接加载js

vue中document.write异步加载外部脚本的写法

vue3 文件加载顺序

使用defer优化vue项目首次加载白屏时间

vue : 无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

vue : 无法加载文件 C:\Users\HONOR\AppData\Roaming\npm\vue.ps1,因为在此系统上禁 止运行脚本。

vue : 无法加载文件 D:\LenovoSoftstore\Install\Vue\node_global\vue.ps1，

vue : 无法加载文件 C:\Users\user\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

vue : 无法加载文件 C:\Users\ynadmin\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

vue动态添加html

vue : 无法加载文件 C:\Users\nathaniel\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

vue : 无法加载文件 C:\Users\86130\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

vue : 无法加载文件 C:\Users\lenovo\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

vue加载外部html页面

vue : 无法加载文件 C:\Users\车车会不见噢\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

vue : 无法加载文件 C:\Users\dell\AppData\Roaming\npm\vue.ps1

会员权益专享

最新资源

vue : 无法加载文件 C:\Users\HONOR\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。