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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JSON相关知识汇总
Jul 03 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
原生javascript中this几种常见用法总结
Feb 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汉字转换拼音的类
2013/06/18 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python利用sklearn包编写决策树源代码
2017/12/21 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python assert的用处示例详解
2019/04/01 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
文明寝室标语
2014/06/13 职场文书
施工安全责任书范本
2014/07/24 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL