vue项目中用cdn优化的方法


Posted in Javascript onJanuary 03, 2018

在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法—-cdn和异步加载,异步请看 https://3water.com/article/110661.htm

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 #Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 #Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 #Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
angularjs实现分页和搜索功能
Jan 03 #Javascript
You might like
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php生成扇形比例图实例
2013/11/06 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
python flask实现分页效果
2017/06/27 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
医生自荐信
2013/10/11 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
小学生常见病防治方案
2014/06/06 职场文书
2014教师研修学习体会
2014/07/08 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书