vue项目中用 cdn 优化

2023-11-12

在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法—-cdn和异步加载,异步请看
http://blog.csdn.net/gang456789/article/details/78224751
1。cdn
首先cdn是什么,自己百度哦
其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且。浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源,就可以缓解我们服务器的压力,原理是将我们的压力分给其他服务器点。下面是代码的具体实现:
(1)首先是引入资源,这里用的是bootstrap提供的资源, 你可以登录官网进入查看哦,网址:http://www.bootcdn.cn/
vue在最外层的index.js文件中引入,引入如下

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

然后项目中需要改的地方是bulid文件夹下面的webpack.base.conf.js文件,改的地方为

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'BMap': 'BMap',
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  },

这里需要将vue和vue-router公开出去,供全局使用,这里小写的vue和vue-router是我们引入资源时对应的名字,冒号后面大写的名字是我们自己定义的名字和项目中要使用的名字,当然这两个名字可以一样,接下来就是将我们项目中引用对应资源的地方将原先的引入方式去掉,也就是我们原先用import引入的,例如main.js和router文件夹下的index.js修改:

// import Vue from 'vue'
// import Vue from 'vue'
// import VueRouter from 'vue-router'

注意将router文件夹下的index.js修改

export default new VueRouter({
  // modes: 'history',
  routes: [
    {
      path: '/',
      redirect: '/main/home'
    },

这里需要说明的是上面修改的可能不是必要的,这里只为记录一下知识,不喜勿喷

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目中用 cdn 优化 的相关文章

  • 梯度下降法(BGD,SGD,MSGD)python+numpy具体实现

    梯度下降是一阶迭代优化算法 为了使用梯度下降找到函数的局部最小值 一个步骤与当前位置的函数的梯度 或近似梯度 的负值成正比 如果相反 一个步骤与梯度的正数成比例 则接近该函数的局部最大值 该程序随后被称为梯度上升 梯度下降也被称为最陡峭的下
  • javascript中的with()方法

    with 方法 with方法用于多次使用对象属性时 可简化多次编写同一对象的工作 例 js代码 var aa document createElement div 创建一个div赋给aa with aa style width 400px
  • webpack打包文件过大的优化,提取第三方库(vue,ali-oss)到cdn,externals配置

    问题产生原因 vue或用其他第三方库webpack打包导致某单文件js过大 优化形式 webpack的externals配置 从输出的 bundle 中排除依赖 可将第三方库放到html用cdn加载 类似 调试方式 可参考vue cli 脚
  • 2轴直线插补程序分析

    1 数据采样插补法 在CNC系统中较广泛采用的另一种插补计算方法即所谓数据采样插补法 或称为时间分割法 它尤其适合于闭环和半闭环以直流或交流电机为执行机构的位置采样控制系统 这种方法是把加工一段直线或圆弧的整段时间细分为许多相等的时间间隔
  • oracle优化-----监控指标

    author skatetime 2010 03 24 昨天一个朋友问我 如何优化数据库 在想优化数据库前 首先要确认数据库是否需要优化 这就需要一些监控指标了 如 事务响应时间 数据库的逻辑读 数据库的物理读 物理写等 日常监控这些指标
  • 使用CDN有什么好处?

    现如今 在这个移动互联网时代 越来越多的人使用手机观看视频 丰富自己的娱乐生活 可是 大家在追剧的时候 有没有想过一个问题 为什么以前观看视频时 那么卡顿 现在看视频却这么流畅呢 其实 这是互联网视频内容提供商使用了摩杜云CDN 解决巨大流
  • asp.net mvc 5 - StyleBundle CdnFallbackExpression 问题?

    我已通过 StyleBundle 将引导 CSS 文件添加到我的 asp net mvc 5 项目中 它用作 Cdn https www asp net ajax cdn Bootstrap Releases on the CDN 14 v
  • 如何有效地检索 Facebook 照片 URL 的到期日期并在到期前续订?

    主要问题 应用程序缓存来自 Facebook 照片 CDN 的 URL 照片有时会过期 我的 技术 问题 Facebook CDN 过期 标头似乎不可靠 或者我不知道如何处理它们 使用 CURL 检索过期日期 curl i X HEAD h
  • 存储静态文件(图像、CSS、JavaScript)的最佳性能 - CDN - Blob 存储或 Web 角色

    我有一个关于 CDN Blob 存储和 Web 角色以及性能的非常基本的问题 我有一个非常简单的网站 其中包含静态内容 HTML Js 图像 CSS 和视频 如果用户访问所有网站 整个内容最多可达 3 5MB 我网站的流量 98 来自英国
  • Shopify CDN 的资产 URL 是如何生成的?

    假设我上传了一张名为 logo png 的图像到 Shopify 上的商店 在 Liquid 模板中 我可以为其生成一个 URL 如下所示 logo png asset url 这会生成一个 URL 例如 http static shopi
  • 间歇性 Cloudfront CDN 故障(监控)- CDN 故障转移

    在过去的 2 个月中 我遇到了 Amazon Cloudfront 间歇性故障 每周 2 3 次 页面将从我的 Web 服务器加载 但来自 CDN 的所有资产当时都会阻塞等待几分钟 我确认使用来自不同数据中心的 shell 卷曲 有些可以工
  • HTML 注入时使用 CDN 或外部域的内联脚本后执行脚本文件

    我在将 HTML 注入已加载的 DOM 时遇到问题 其中在下载脚本文件后加载内联 javascript 据我所知 这不应该是异步的 内联脚本应该在脚本文件之后执行 如果域名与调用页面相同 则此方法有效 但使用 CDN 甚至子域可以实现相同的
  • 通过 CDN 提供受保护的资产

    我们希望从少数可用的 AWS 区域提供大量视频文件 目标受众来自全球多个地点 无法保证连接速度 所以 CDN 最好是 CloudFront 是绝对需要的 这些视频需要受到保护 因此只有在用户经过身份验证并被授权观看这些视频时才能播放 显然
  • 多进程之Binder的意外死亡及权限校验

    Android多进程系列 Android 多进程通讯之几个基本问题 Android多进程之Binder的使用 Android多进程之手动编写Binder类 Android多进程之Binder解绑监听的问题 Android 多进程之Messe
  • 从 CDN 包中删除 Babel(StandAlone) 警告消息

    我们在项目的某些部分使用 React JS CDN 出于质量目的 我们希望向客户提供无警告的代码 我们正在使用以下库 问题是我们在控制台中收到以下警告消息 您
  • Amazon S3 Cloudfront 部署最佳实践

    我们当前的站点计划是使用 Amazon 的 Cloudfront 服务作为 CSS JavaScript 和图像等资产文件以及任何其他静态文件的 CDN 目前 我们在 S3 中有 1 个存储桶 其中包含所有这些静态文件 这些文件根据其内容被
  • cdnjs 和 npm 有什么区别?

    cdnjs 和 npm 有什么区别 npm 是一种 CDN 内容分发网络 吗 npm Node Package Manager 是一个由 Node js 模块 包 组成的存储库 您可以从中搜索并下载模块 cdnjs 是 JavaScript
  • Vue - 添加 CDN 组件,无需 webpack

    我想添加this https cdn jsdelivr net npm vuejs auto complete 0 9 0 dist build js不使用 webpack 的情况下将组件添加到我的 Vue js 项目中 我尝试将其添加到h
  • 如何防止在 Cloudflare 上暴露源 IP 地址?

    在 Cloudflare DNS 设置页面上 它指出An A AAAA CNAME or MX record is pointed to your origin server exposing your origin IP address
  • 加载 DOM 后如何运行 jQuery 的后备副本?

    以下是a中的第一行代码

随机推荐

  • 双向链表为何时间复杂度为O(1)?

    双向链表相比于单向链表 所谓的O 1 是指删除 插入操作 单向链表要删除某一节点时 必须要先通过遍历的方式找到前驱节点 通过待删除节点序号或按值查找 若仅仅知道待删除节点 是不能知道前驱节点的 故单链表的增删操作复杂度为O n 双链表 双向
  • SpringBoot注解大全(超详细)

    一 启动注解 Spring Boot 应用的入口注解 SpringBootApplication SpringBootApplication 是一个注解 它是 Spring Boot 应用的入口注解 用于表示一个应用程序的主类 这个注解通常
  • php设置一分钟访问一次接口,php 如何锁定接口,让一个接口,同一时间只处理同一人的一次请求?...

    最后我是用redis锁解决问题的 锁的代码如下 redis操作 ps 如果没有安装redis 会直接返回false 不会报错 Created by PhpStorm User haua Date 16 10 21 Time 23 02 cl
  • J2Cache的学习

    J2Cache的学习 此教程基于黑马程序员Java品达通用权限项目 哔哩哔哩链接 https www bilibili com video BV1tw411f79E p 97 一 j2cache介绍 j2cache是OSChina 开源中国
  • java高并发

    转载地址 https www cnblogs com lr393993507 p 5909804 html 对于开发的网站 如果网站的访问量非常大 那么我们应该考虑相关的 并发访问问题 并发是绝大部分程序员头疼的问题 为了更好的理解并发和同
  • Java 抽象类能不能实例化

    短回答就是 不能 这里有 2 个概念 什么是抽象类和什么是实例化 实例化 实例化简单来说就是为 Java 中使用的对象分配存储空间 抽象类 从代码上来说 抽象类就是一个用 abstract 关键字来修饰的类 这个类除了不能被实例化以外 其他
  • 若依使用模块窗口时把子页面内容传递给父页面

    在若依开发中 经常需要将子页面的表格中勾选内容传回父页面 本文将具体说明实现方式 1 父页面中存在一个按钮 点击即打开子页面 一个模态窗口 会阻塞父页面的行为 2 在父页面中 需要完成打开子页面和回调给父页面的方法 而且此方法可在若依样例中
  • 【程序人生】从土木专员到网易测试工程师,薪资翻3倍,他经历了什么?

    转行对于很多人来说 是一件艰难而又纠结的事情 或许缺乏勇气 或许缺乏魄力 或许内心深处不愿打破平衡 可对于我来说 转行是一件不可不为的事情 因为那意味着新的方向 新的希望 我是学工程管理的 一个工程类的专业 毕业之后的职业轨迹 土木工程专员
  • 【VSCode】1、VSCode 如何连接服务器

    文章目录 一 安装 remote ssh 插件 二 直接连接 三 配置 SSH 公匙 免密登录 一 安装 remote ssh 插件 点击插件搜索框 搜 remote ssh 点击安装 安装完成后就会出现下面的图标 二 直接连接 点击加号
  • r语言中出现unused argument怎么办

    如果在使用 R 语言时出现 unused argument 的错误提示 通常是因为在调用函数时传入了多余的参数 为了解决这个问题 你需要检查你的代码 确保你只传入了函数所需的参数 例如 如果你调用的函数只有两个参数 但你却传入了三个参数 那
  • 蓝桥杯打卡Day7

    文章目录 阶乘的末尾0 整除问题 一 阶乘的末尾0IO链接 本题思路 由于本题需要求阶乘的末尾0 由于我们知道2 5 10可以得到一个0 那么我们就可以找出2的数和5的数 但是由于是阶乘 所以5的数量肯定是小于2的数量 因此我们只需要知道5
  • Python中configparser读取配置

    Python中的configparser模块可以帮助开发者轻松地读取和写入配置文件 配置文件通常用于存储应用程序的设置 例如数据库连接信息 API密钥等等 在本篇博客中 我们将介绍如何使用configparser模块来读取和写入配置文件 读
  • leetcode No1833 雪糕的最大数量

    题目 题解 贪心 排序 贪心 顾名思义就是贪到最多的 本题要求一定数额的钱 要获得最多数量的雪糕 那以我们平常人的思维去买 就是 先买最便宜的 然后再买次便宜的 因此我们可以先将数组排序 排序后从头开始遍历 一直算到前i个雪糕价钱之和大于c
  • 高效素数判断

    素数是指在大于1的自然数中 除了1和它本身以外不再有其他因数的自然数 那么 对于任意数N 判断其是否是素数 就需要从 2 N 一一枚举整除判断 若都不能整除 则N为素数 public static boolean isprime int n
  • 魔改并封装 YoloV5 Version7 的 detect.py 成 API接口以供 python 程序使用

    文章目录 Introduction Section 1 起因 Section 2 魔改的思路 Section 3 代码 Part 1 参数部分 Part 2 识别 API Part 3 完整的 DetectAPI py Part 4 修改
  • 免费商品信息查询接口(条形码)

    最近公司有一个需求 扫描商品条形码显示商品信息 原以为国内应该会免费提供接口 理想总是美好的 现实都是残酷的 在阿里云 京东等API开放平台找了一番 基本都是按次调用收费 公司的需求每位用户一天可能多次调用接口 这样一算 成本太高 既然没有
  • thrift介绍及应用(二)—简单应用

    原文 http blog csdn net guxch article details 12162131 六 一个最简单的实例 Thrift文件 demo thirft 来自官网 如下 plain view plain copy struc
  • 力扣160链表相交(c++版)

    力扣160链表相交 c 力扣题目链接 思路 如果两个链表相交 又都不存在环 那么不难想象这两个链表共同构成了一个Y型 相交部分全部都相同 两链表交点处指针相等 声明指针A指向链表A的头结点 指针B指向链表B的头结点 我们求出两个链表的长度
  • 【基础】创建react脚手架

    React day01 Hello world 一 升级node 1 进入官网 https nodejs org en 2 重新下载最新版本 3 重新安装 一直选择next 既会被覆盖 4 输入 node v 查看最新版本 注 window
  • vue项目中用 cdn 优化

    在我们写项目中 优化问题是不容忽视的 尤其是首屏优化更是重中之重 这里介绍两种方法优化方法 cdn和异步加载 异步请看 http blog csdn net gang456789 article details 78224751 1 cdn