js中动态获取页面的script地址,并动态给他添加script标签和地址,解决页面白屏问题

本文介绍了在Vue.js项目中,为避免页面因加载过多JS而导致白屏,采取的一种策略:根据组件需求动态加载CDN资源。通过在组件的mounted阶段动态插入script标签,实现按需加载,提高页面性能。
摘要由CSDN通过智能技术生成

前言:(业务逻辑)

在vue中,遇到这样的情况,初始化加载太多js,导致页面白屏,为了解决这个情况,决定使用具体组件具体加载相应的cdn地址。

为啥不用vue的按需加载呢,是因为我们项目对性能要求很高,但是按需加载后,引入的插件包,打包以后的大小比cdn要大太多了,整体来说是使用他是得不偿失,但是一次性加载太多cdn又会导致白屏,所以在这里我使用的方法:具体某个页面使用第三方插件,就在使用的页面js动态加载scirpt,并给他上标签

具体操作:

1、面临第一个问题,要先获取到当前页面所用到的所有引入 的

2、给界面加载我们想放进去的cdn地址,因为vue是单页面组件,所有我们直接放在 #app上

      // 创建script标签,引入外部文件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementById('app').appendChild(script)

分享源码:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Vue的异步组件和路由懒加载来解决打包后首页白屏问题,并给加载添加提示。 首先,确保您已经安装了Vue Router插件。然后,在路由配置使用`import()`函数来异步加载组件。例如: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: () => import(/* webpackChunkName: "home" */ './views/Home.vue') }, // 其他路由配置... ]; const router = new VueRouter({ mode: 'history', routes }); export default router; ``` 在上面的代码,`import()`函数将组件异步加载,`webpackChunkName`参数用于指定生成的代码块的名称。 接下来,在你的根组件(通常是App.vue)添加一个加载的提示。你可以使用Vue的`v-if`和`v-else`来控制加载的提示是否显示。例如: ```html <template> <div> <div v-if="loading">加载...</div> <div v-else> <!-- 页面内容 --> </div> </div> </template> <script> export default { data() { return { loading: true }; }, mounted() { // 模拟异步加载延迟 setTimeout(() => { this.loading = false; }, 2000); // 延迟2秒 } }; </script> ``` 在上面的代码,`loading`变量控制加载提示的显示与隐藏。在`mounted`钩子,您可以使用异步操作(例如axios请求)来加载页面内容,并在加载完成后将`loading`设置为`false`。 这样,在打包后,当用户访问首页时,会先显示加载的提示,直到页面内容加载完成后再显示页面内容,避免了首页白屏问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值