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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
原生JS封装animate运动框架的实例
Oct 12 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 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获取新浪微博数据API实例
2013/11/12 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
简单的js表单验证函数
2013/10/28 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Django的Modelforms用法简介
2019/07/27 Python
如何在python中执行另一个py文件
2020/04/30 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
公司年会策划方案
2014/05/17 职场文书
白莲教口号
2014/06/18 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
作风年建设汇报材料
2014/08/14 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书