前端Vue项目实现CDN加速
前端Vue项目实现CDN加速
我们在开发前端项目的时候难免会遇到请求响应慢,页面数据渲染慢,等等问题。浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN 具有更好的可用性,更低的网络延迟和丢包率 。
一,引用外部CDN加速
首先我这里用的是 jsdelivr 的CDN加速。
进入jsdelivr的官网后,我们可以看见,不仅有npm的加速,还有github,WordPress等等的CDN加速外链。
下面的搜索框可以有助于搜索你想要加速的某个插件…这里我就不一一举例了。
怎么找?
首先搜索我们想要加速的插件,这里我用axios为例
可以看见这边有版本信息,这个版本信息是可以选择的,我们只需要选择我们需要的版本即可,然后把后缀为.main.js/.main.css这一行复制下来粘贴到我们项目中外链版本号后面即可(具体怎么粘贴,详见【怎么用?】)。
怎么用?
1,直接打开我们的项目中【index.html】文件,把下面的外链复制进去即可。
<body><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script>
</body>
这里根据你的package.json文件更改对应CDN加速的版本。
2,把项目中有在CDN加速的插件,不用 import … from … 这样去引入了,直接换成 const … = require("…") 这样去引用。
3,打开webpack.base.conf.js文件,修改配置。
找到下面的位置,把代码添加进去:
代码如下:
externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','element-ui': 'Element',},
这里面以键值对的形式,把刚刚在index.html中引入的CDN插件写入。
最后的最后一定要记得重启服务,不然CDN不会起作用的,因为我们更改了webpack配置。
如果还有什么疑问,或者更好的加速方案,欢迎在下方评论。
前端Vue项目实现CDN加速相关推荐
- 前端CDN资源库,再也不用担心vue首次加载慢的问题了,vue项目必备cdn加速
试了好多个cdn资源库,可能跟国内外有关系吧,整体测试下来BootCDN的速度相对来说挺快的,支持一下 unpkg.com/一个内容源自 npm 的全球快速 CDN 好慢呐 unpkg.com 引用的 ...
- Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目 前言 安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件 配置NodeJs 新建及配置任务 ...
- 前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能 文章目录 前端vue项目(使用pdf.js) pdf展示及pdf工 ...
- 服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码 本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
- 前端-网站性能优化——CDN加速
前端-网站性能优化--CDN加速 网站性能优化是一个大活儿,按工种划分的话,分前端.后端和db等,作为一名前端工程师,这系列文章只聊前端工程师应该知道的关于网站性能优化的那些事儿.写此文章算是一个工作 ...
- 使用Docker安装的Nginx代理前端vue项目
本篇文章主要是记录 一次使用 docker成功部署nginx之后,代理(部署)静态资源或前端vue项目,遇到的2个问题(docker安装nginx参考) 1.前置条件,防火墙关闭,开放80端口,doc ...
- Windows服务器部署前端vue项目
阿里云Windows服务器部署前端vue项目 准备工作 下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...
- 前端CDN资源库,解决HTML大屏首次加载慢的问题了,大屏项目必备cdn加速
CDN简介: CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发 ...
- Vue3项目使用cdn加速
最近在了解前端性能优化问题,想到能不能给我之前做的小项目使用cdn优化一下,准备冻手 首先是找到免费的cdn资源,网上有很多我就不说明了,这里列出我使用的 样式文件放在head里面 <link ...
最新文章
- 【FFmpeg】截至ffmpeg4.2不推荐(Deprecate)继续使用的接口,以及代替它的接口汇总
- java 存入对象io_Java面向对象 IO (一)
- AngularJS ui-router (嵌套路由)
- 职务与职级并行套改表_公务员职务职级并行时,15年的主仼科员能套四级调研员吗?...
- 重要的基础注解@import
- c语言判断任意位数能否倒序数,C语言求助!一个三位数的逆序数,总是编不对...
- 程序员吐槽:组里新来一个“加班狂”,可把大家害惨了
- java扫描所有用户信息_监听器实现案例----自定义session扫描器和统计在线用户人数及用户信息...
- 「镁客·请讲」南京布塔:用动作捕捉世界的精彩
- 点这里安装Alexa工具条
- Region Proposal by Guided Anchoring 笔记
- 全国海选第三期:广州赛区节目视频
- 文案排版(参考中文文案排版指北)
- 高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline),光标使用十字架(crosshair)类型,不断出现closehand小手图标干扰
- FORTIFY_SOURCE详解
- 数据指标体系搭建实践
- 我的世界服务器怎么制作头颅,我的世界怎么用指令弄自己的头颅 | 手游网游页游攻略大全...
- web怎么将dwg转换图片_怎么将DWG图纸转换成JPG格式图片
- 关于常用(?)字符串处理函数的合集
- WAF是什么?又有什么作用?