ES6动态加载css、js

最新推荐文章于 2023-06-17 16:56:40 发布

码页面

最新推荐文章于 2023-06-17 16:56:40 发布

阅读量1.5k

点赞数

分类专栏： javascript vue

本文链接：https://blog.csdn.net/ministech/article/details/106036980

版权

本文介绍了如何在ES6中利用动态导入功能来按需加载CSS和JavaScript文件，提高网页性能。通过示例代码详细讲解了动态加载的实现过程，包括CSS的link标签插入与JS模块导入，以及它们在不同场景下的应用。

摘要由CSDN通过智能技术生成

loadScript(src) {
  return new Promise((resolve, reject) => {
     var script = document.createElement('script'),
         head = document.getElementsByTagName('head')[0];
     script.type = 'text/javascript';
     script.charset = 'UTF-8';
     script.src = src;
     if (script.addEventListener) {
       script.addEventListener('load', function () {
         resolve();
       }, false);
     } else if (script.attachEvent) {
       script.attachEvent('onreadystatechange', function () {
         var target = window.event.srcElement;
         if (target.readyState == 'loaded') {
           resolve();
         }
       });
     }
     head.appendChild(script);
   })
 },
 loadCss(href) {
   return new Promise((resolve, reject) => {
     var link = document.createElement('link'),
         head = document.getElementsByTagName('head')[0];
     link.rel =