vue项目中如何使用cdn优化

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'
  },

原创文章,作者:TMQOS,如若转载,请注明出处:http://www.wangzhanshi.com/n/12176.html

(0)
TMQOS的头像TMQOS
上一篇 2025年1月1日 17:07:08
下一篇 2025年1月1日 17:07:10

相关推荐

  • cdn优势体现在哪里

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月1日
  • 企业出海与CDN

    企业出海跟你的CDN加速有什么关联?网站那些事提供的CDN加速可以满足企业的需求吗?网站那些事CDN有什么优势?首先,与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速…

    2025年1月1日
  • wordpress如何使用云存储实现CDN加速

    又拍云存储基本介绍 又拍云存储是通用的大规模存储服务。开放高度可扩展的API,开发人员可轻松使用,帮助互联网企业以极其低的价格,获得可靠、安全、快速的基础存储系统。我们主要为用户网…

    2025年1月1日
  • cdn加速游戏的优势

    网站那些事内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。网站那些事CDN…

    2025年1月1日
  • cdn服务主要有哪些

    网站那些事内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。网站那些事CDN…

    2025年1月1日
  • cdn加速对网站效果如何

    与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速、性价比高、简单易用、高效智能。比较多的用户会问到稳定快速这个优点,一般来说,网站那些事的CDN特点是分担源站压力,避…

    2025年1月2日
  • cdn性能测试工具有哪些

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月1日
  • 使用缓存加速之后的网站访问过程变化

    在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别:   用户访问未使用CDN缓存网站的过程为:  1)、用户向…

    CDN加速 2025年1月1日
  • 如何用EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本

    恰巧发现有个叫“EarthLiveSharp”,可用将日本向日葵8号卫星的地球实时图片设为屏保。向日葵8号卫星的地球实时图片官网为:http://himawari8.nict.go…

    CDN加速 2025年1月1日
  • 如何使用 CDN 实现应用的缓存和加速

    1. CDN 简介 CDN 的全称是 Content Delivery Network,即内容分发网络。 CDN 是构建在网络之上的内容分发网络。 CDN 使用户就近获取所需内容,…

    2025年1月1日

发表回复

登录后才能评论