vue动态加载js和css以及部分页面加载特定的js和css

vue项目第一次加载很慢的，发现在第一次加载要很大的js导致卡顿、可以使用cdn加速和其他gzip方式效果不是很明显。因此考虑每个页面动态加载js和css的方式来解决。

第一种方式直接在index.html直接引入js和css

注意这种方式，第一次加载大量js会很慢、很慢、很慢！

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>WMSmile</title><link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' /><link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' /><!-- <link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' /> --><script src="./static/luckysheet/plugins/js/plugin.js"></script><!-- <script src="./static/luckysheet/luckysheet.umd.js"></script> --><!-- 也可以使用cdn url 加载 --></head>
<body><div id="app"></div><!-- built files will be auto injected -->
</body>
</html>

第二种方式在对应的页面加载特定的js和css

工具类动态加载js和css

直接上代码

ts版本

wmtools.js 文件如下：

export class WMTools {/*** 动态加载css文件* @param {*} url* @param {*} isCache*/static loadCSS(url: string, isCache = false) {const element = document.createElement("link");element.setAttribute("rel", "stylesheet");element.setAttribute("type", "text/css");if (isCache) {element.setAttribute("href", url + "?t=" + new Date().getTime());} else {element.setAttribute("href", url);}document.head.appendChild(element);}/*** 动态加载js文件* @param {*} src* @param {*} callback*   loadScript("",function(){*   console.log("加载成功")* })* var that = this; 在方法里面使用that*/static loadJS(src: string,callback: (this: HTMLScriptElement, ev: Event) => void,isCache = false): void {const script = document.createElement("script");script.type = "text/JavaScript";if (isCache) {script.src = src + "?t=" + new Date().getTime();} else {script.src = src;}if (script.addEventListener) {script.addEventListener("load", callback, false);}document.head.appendChild(script);}
}

使用方法在xxx.vue界面

  created() {WMTools.loadJavaScript("xxxx.js", () => {console.log("加载成功");//执行其他逻辑});},

同理，css 类似。

js版本

wmtools.js 文件如下：


/*** 动态加载css文件* @param {*} url* @param {*} isCache*/
export function loadCSS(url,isCache=false) {let element = document.createElement("link");element.setAttribute("rel", "stylesheet");element.setAttribute("type", "text/css");if (isCache) {element.setAttribute("href", url + "?t=" + new Date().getTime());} else {element.setAttribute("href", url);}document.head.appendChild(element);
}/*** 动态加载js文件* @param {*} src* @param {*} callback*   loadScript("",function(){*   console.log("加载成功")* })* var that = this; 在方法里面使用that*/
export function loadJS(jsUrl, callback,isCache = false) {var script = document.createElement('script');var head = document.head;script.type = 'text/JavaScript';if (isCache) {script.src = jsUrl + "?t=" + new Date().getTime();}else {script.src = jsUrl}if (script.addEventListener) {script.addEventListener('load', callback, false);}head.appendChild(script);
}

使用方法如下：

import { loadJS } from "@/utils/wmtools"
loadJS("xxxx.js", function () {console.log("加载成功")
});

vue动态加载js和css以及部分页面加载特定的js和css相关推荐

c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
JS，两种在页面加载完成后自动执行的方法（ready，onload）
JS,两种在页面加载完成后自动执行的方法 1.jQuery的ready事件,需要引入jQuery的包才能使用,表示文档结构已经加载完成(不包含图片等非文字媒体文件): ready可以多次调用,可以绑定 ...
html js页面加载前执行,Javascript代码在页面加载时的执行顺序介绍
一.在HTML中嵌入Javasript的方法 1.直接在Javascript代码放在标记对之间 2.由标记的src属性制定外部的js文件 3.放在事件处理程序中,比如: 点击我 4.作为URL的主体, ...
vue组件加载完成之后执行方法_vuejs页面加载完成后执行函数
module.exports = { data: function(){ return { memberQrcodeState: false } }, components: {memberQrcod ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
优化ajax加载数据速度,通过ajax优化页面加载速度
最近在做的一个外包项目,由于客户的要求,首页内容十分繁杂,并且由于客户需求的变更,导致初期的设计不够合理,调用了大量的后台服务,首页两三秒才能加载出来,重新调整服务又太麻烦,基本上是重构了... 优化 ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
html页面加载时触发的方法,在页面加载时触发onchange html事件
好的,我在select字段上有一个onchange事件.它现在很棒.当下拉"网络"更改时,它会刷新第二个下拉列表.我还希望顶部的ajax代码在页面加载和onchange上触发,以便 ...

vue动态加载js和css以及部分页面加载特定的js和css

vue动态加载js和css以及部分页面加载特定的js和css

第一种方式直接在index.html直接引入js和css

第二种方式在对应的页面加载特定的js和css

工具类动态加载js和css

ts版本

js版本

vue动态加载js和css以及部分页面加载特定的js和css相关推荐

最新文章

热门文章

vue动态加载js和css以及部分页面加载特定的js和css

vue动态加载js和css以及部分页面加载特定的js和css

第一种方式 直接在index.html直接引入js和css

第二种方式在对应的页面加载特定的js和css

工具类动态加载js和css

ts版本

js版本

vue动态加载js和css以及部分页面加载特定的js和css相关推荐

最新文章

热门文章

第一种方式直接在index.html直接引入js和css