vue项目中用cdn优化的方法
在我们写项目中，优化问题是不容忽视的，尤其是首屏优化更是重中之重，这里介绍两种方法优化方法—-cdn和异步加载，异步请看 https://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'
},
这里需要说明的是上面修改的可能不是必要的，这里只为记录一下知识，不喜勿喷
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要介绍了vue如何实现拖动图片进行排序Vue.Draggable，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
我们在开发过程中，有时会遇到后端返回的文件地址和我们的网站不是同源的情况下，本文就介绍了vue如何根据url下载非同源文件，感兴趣的可以了解一下2021-06-06
el-form-item prop属性动态绑定不生效问题及解决
这篇文章主要介绍了el-form-item prop属性动态绑定不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下2023-12-12
要实现不同角色登录跳转不同的前端页面,可以在登录成功后,根据用户的角色信息,使用路由跳转到不同的页面,这篇文章主要给大家介绍了关于前端实现不同角色登入展示不同页面效果的相关资料,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识，本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下2018-09-09
解决vue2 在mounted函数无法获取prop中的变量问题
这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了详解vue的diff算法原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论