vue性能优化之cdn引入vue-Router的问题

目录
  • cdn引入vue-Router问题
  • vue引入外部cdn报错 'XXX is not defined' 及事件处理
    • 解决办法

cdn引入vue-Router问题

关于vue的性能优化，有一个非常重要的点，就是用cdn的方式引入vue、vue- router、ElementUI、vuex、axios、jquery，那么到底怎么引呢？

1、打开国内cdn服务网址： https://www.bootcdn.cn/

2、查看你的项目 package.json ，查看你安装的是哪个版本

3、在cdn的服务网站上搜索就可以啦

这时候运行，发现报错了：

Cannot redefine property: $router

不可重复定义 $router ,

4、解决办法：webpack.base.conf.js

  externals: {
   'vue': 'Vue',
   'vuex': 'Vuex',
   'vue-router': 'VueRouter',
   'element-ui': 'ELEMENT'
  },

5、之后要重启！！！

另外一个问题：在使用cdn之前，我们需要解决当前路由重复点击报错的问题，在使用了cdn之后，就不需要了，可能是封装进去了？有待考察。。。

// 解决vueRouter 跳转相同路由报错

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

return originalPush.call(this, location).catch(err => err)

}

vue引入外部cdn报错 'XXX is not defined' 及事件处理

框架：vue-cli（vue脚手架）

例：以cdn引入腾讯防水墙为例

前因：在html的head中引入外部cdn链接，

在vue文件中直接使用，如图

结果：如图报错

解决办法

1. 在index.html中的head中引入，

2.在webpack.base.conf.js中配置

module.exports = {
  externals: {
    TencentCaptcha: 'TencentCaptcha'
  },
....
}

vue-cli3版本中在 vue.config.js 文件中配置 externals

module.exports = {
  devServer: {
    port: 3200// 端口号配置
  },
  configureWebpack: {
    externals: {
      TencentCaptcha: 'TencentCaptcha'
    }
  }
}

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

3.在需要使用的vue文件中引入

import TencentCaptcha from 'TencentCaptcha';

使用

let t = new TencentCaptcha(this.$appid, (rsp) => {
            console.log(rsp);
            t.destroy();
            if (rsp.ret === 0) {
              ...
            } else {
            }
          }, {});
          t.show();

关于腾讯防水墙的文档说明

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    Vue浅析讲解动态组件与缓存组件及异步组件的使用

    目录 1.什么是动态组件 2.如何实现动态组件渲染 3.如何实现缓存组件 4.异步组件 1.什么是动态组件 当我们希望页面中的某个地方,在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件. 2.如何实现动态组件渲染 vue提供了一个内置的组件,专门用来实现动态组件的渲染:通过 is 属性动态指定要渲染的组件 因为要渲染的组件是不确定的,所以要通过data申明一个变量用来接收组件的名称,用 :is 动态绑定这个变量到组件中,通过按钮添加事件改变变量的值来切换相应组件 案例: //父

  • Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)

    不同的路由共用一个组件component,并用keepAlive实现不同的页面缓存 实现功能:使用列表页面检索的数据跳转到对应的详情页面,从详情页回到列表页能记住上次检索的数据,再次切换到详情页时能正常取到对应的数据 实现方式使用Vue keepAlive实现页面缓存,整理了一些资料和其他的博客在这里记录一下.... keepAlive原理: 1,保留组件的状态,在重新进入页面时避免重新渲染.2.是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中.3.当组件在 内被切换,它的 acti

  • 使用v-memo缓存模板子树提高应用性能详解

    目录 引言 v-memo 是做什么的? 事例 错误的使用方式 管理更新 与 v-for 结合使用 无意中停止了子组件触发的更新 总结 引言 Vue3 为我们提供了几项开箱即用的重大性能改进,但也引入了一些额外的手动功能,可以帮助提高我们的应用性能. 在这节课中,我们介绍一下,在 Vue 3.2 中引入新指令 v-memo.引入这个指令的目的是帮助我们提高中型/大型 Vue 应用程序的性能,小项目大家根据需要自行决定. v-memo 是做什么的? 官网对 v-memo 定义是这样的: 缓存一个模板

  • vue虚拟滚动性能优化方式详解

    vue虚拟滚动性能优化方式详解

    目录 引言 虚拟滚动(Virtual Scrolling) 理解虚拟滚动 虚拟 滚动 实现虚拟滚动 核心步骤 效果预览 最后 引言 一个简单的情景模拟(千万别被带入): A: 假设现在有 10 万条数据,你作为前端该怎么优化这种大数据的列表? B: 针对大数据列表一般不会依次性加载,会采用上拉加载.分页加载等方式实现优化. A: 那假如加载到最后一条数据的时候,页面上只是列表部分的数据就至少对应 10 万个 dom 节点,你觉得一个页面渲染至少 10 万个 dom 节点的性能如何? A: 如果这

  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    目录 每次发版都要强刷清除浏览器缓存问题 原理 vue 强制清除浏览器缓存 (1)最基本的方法就是 (2)在html文件中加入meta标签 (3)需要后端陪着,进行nginx配置 (4)在脚本加载时加入一个时间戳 每次发版都要强刷清除浏览器缓存问题 原理 将打包后的js和css文件,加上打包时的时间戳 1.index.html 在 public 目录下的index.html文件里添加如下代码: <meta http-equiv="pragram" content="no

  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    目录 cdn引入vue-Router问题 vue引入外部cdn报错 'XXX is not defined' 及事件处理 解决办法 cdn引入vue-Router问题 关于vue的性能优化,有一个非常重要的点,就是用cdn的方式引入vue.vue- router.ElementUI.vuex.axios.jquery,那么到底怎么引呢? 1.打开国内cdn服务网址: https://www.bootcdn.cn/ 2.查看你的项目 package.json ,查看你安装的是哪个版本 3.在cdn

  • Vue性能优化的方法

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人觉得要从两个方面入手来确定使用哪个, 1.权限的问题,只要涉及到权限相关的展示用v-if比较好 2.切换地频率,如果频繁的切换我们用v-show,不频繁的切换用v-if 其实两者各有优缺,就看你是怎么选择了,用v-if能减少页面中的DOM总数,加快渲染的速度,而且我们要清楚一个事情 v-if是'真正

  • 浅谈Vue 性能优化之深挖数组

    背景 最近在用 Vue 重构一个历史项目,一个考试系统,题目量很大,所以核心组件的性能成为了关注点.先来两张图看下最核心的组件 Paper 的样式. 从图中来看,分为答题区与选择面板区. 稍微对交互逻辑进行下拆解: 答题模式与学习模式可以相互切换,控制正确答案显隐. 单选与判断题直接点击就记录答案正确性,多选是选择答案之后点击确定才能记录正确性. 选择面板则是记录做过的题目的情况,分为六种状态(未做过的,未做过且当前选择的,做错的,做错的且当前选择的,做对的,做对的且当前选择的),用不同的样式去

  • vue项目中如何通过cdn引入资源并配置详解

    目录 概念 作用 引用资源及配置 1.引入 2.配置 3.在main.js文件中去除原来的引用 总结 概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统,当用户向cdn链接请求资源时,cdn会利用最靠近用户的服务器来给用户返回资源. 作用 使用cdn能实现用户不需要在项目中通过npm下载其他资源(如第三方库),直接通过请求cdn服务器,服务器返回后即可使用,这样就减小了打包时包的大小,项目的首屏加载也能过更快. 引用资源及配置 话不多说,下面对vue项目中常用的资源进行cdn引用

  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作

  • Vue中的性能优化方案

    目录 减少响应式使用 1. 使用 computed 缓存计算结果 2. 本地化响应式变量 3. 函数式组件(Vue2) 减少 DOM 渲染压力 1. DOM 频繁切换展示的情况使用 v-show 2. keep-alive 缓存组件状态 3. 路由懒加载 4. 图片懒加载 5. 组件销毁时要清除定时器.EventListener 6. 列表使用唯一 key 减少打包体积 1. 开启 gzip 压缩 2. 按需引入第三方组件 最近使用 Vue 开发的过程中使用到一些对于性能有所提升的编码方式,所以

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • Vue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    众所周知,Vue项目采用了数据双向绑定和虚拟DOM基础,在数据驱动代替DOM频繁渲染已经算是非常高效了,对开发者而言已经非常优化了,那为什么还会有Vue性能优化这一说呢? 因为目前Vue 2.x使用了webpack等第三方打包构建工具,并且支持其他第三方的插件,我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果,下面就来详细说明优化的方向. 1 v-if 和 v-show 的使用 v-if 为false的时候不会渲染DOM到视图,为true的时候才会渲染到视图: v-sho

  • vue终极性能优化方案(解决首页加载慢问题)

    目录 前言 1.路由懒加载 2.打包文件中去掉map文件 3.CDN引入第三方库 4.gzip打包 1.npmi-Dcompression-webpack-plugin 2.在vue.config.js中配置 3.在NGINX中配置 5.终极大招,预渲染 1.cnpminstallprerender-spa-plugin--save-dev 2.vue.config.js 3.router.js 4.main.js 总结 前言 用vue开发项目上线以后,发现首页加载速度非常慢,如果项目比较大,甚

随机推荐