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("加载成功")
});
# javascript # vue.js # css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟