没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
vue项目中用项目中用cdn优化的方法优化的方法
本篇文章主要介绍了vue项目中用cdn优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一起跟随小编过来看看吧
在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法—-cdn和异步加载,异
步请看 //www.jb51.net/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'
},
这里需要说明的是上面修改的可能不是必要的,这里只为记录一下知识,不喜勿喷
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
资源评论
weixin_38567813
- 粉丝: 4
- 资源: 913
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功