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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
php join函数应用
2011/05/04 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
XML的代替者----JSON
2007/07/21 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python制作动态字符图的实例
2019/01/27 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
50岁生日感言
2014/01/23 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
家长会开场白和结束语
2015/05/29 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
勤俭节约主题班会
2015/08/13 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL