在vue中如何使用cdn优化-js教程-PHP中文网

在vue中如何使用cdn优化

亚连

发布： 2018-06-13 17:51:16

原创

2494人浏览过

本篇文章主要介绍了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'
  },

登录后复制

这里需要说明的是上面修改的可能不是必要的，这里只为记录一下知识，不喜勿喷

上面是我整理给大家的，希望今后会对大家有帮助。

在JavaScript中如何判断NaN

如何使用jQuery实现鼠标响应式透明度渐变动画效果

在jQuery中如何实现鼠标响应式淘宝动画效果

详细解读vue-admin和后端(flask)分离结合

在Vue+webpack中详细讲解基础配置

在nodejs+express环境中如何将搭建多人聊天室

使用vue2.0如何实现前端星星评分功能组件

以上就是在vue中如何使用cdn优化的详细内容，更多请关注php中文网其它相关文章！