vue动态加载js和css
2022-07-06 本文已影响0人
WMSmile
vue动态加载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> -->
<!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />-->
<!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />-->
<!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />-->
<!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />-->
<!-- <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script> -->
</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("https://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("https://xxxx.js", function () {
console.log("加载成功")
});
