当我们加载页面时，需要将我们所需要的一些依赖加载到当前会话中然后再开始执行，如果我们首屏，模块比较多是，需要等待的时间会比较长，而且。浏览器内存最多执行四十个进程，需要等到加载完前面的才能执行后面的代码，如果我们采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。

配置
首页引入这些cdn，index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

    <title>mytest</title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but mytest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

然后在vue.config.js添加webpack的externals属性即可

module.exports = {

    baseUrl:'./',

    configureWebpack: {

        //使用cdn，不想让webpack打包进去

        externals: {

            "vue": "Vue",

            "vue-router": "VueRouter"

        }

    },

    chainWebpack: config => {

        // 移除 prefetch 插件

        config.plugins.delete('prefetch')

    }

}

效果

按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的

vue性能优化2--引入cdn的更多相关文章

  1. Vue性能优化

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...

  2. 前端vue性能优化

    一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...

  3. Vue性能优化之组件按需加载（以及一些常见的性能优化方法）

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  4. 浅谈vue性能优化

    基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...

  5. VUE性能优化总结

    1.v-show,v-if 用哪个? 在我来看要分两个维度去思考问题: 第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if, 第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的 ...

  6. vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制

    一.定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  7. 对vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制

    一.定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  8. Vue 性能优化track-by

    Vue 是一个MVVM框架 所谓mvvm就是model-->view,view-->model. vue帮助我们实现了自动绑定.省点我们用JQUERY,zpeto 去操作dom的麻烦. 主 ...

  9. vue性能优化1--懒加载

    懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...

随机推荐

  1. nginx+memcache实现页面缓存应用

    一.前言 nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm.django,大大的提升动态页面的速度. ...

  2. 在openLdap上添加memberOf属性

    我为openldap添加memberof属性的时候参考了这个文章:http://www.adimian.com/blog/2014/10/how-to-enable-memberof-using-op ...

  3. 基本类型算法题目学习（EPI）

    1.关于奇偶校验的方法中,如何快速的求取一个64-bit的数字的奇偶校验位.(如果1的位数为奇数,则奇偶校验位为1,如果1的位数为偶数,则奇偶校验位为0) a.暴力枚举法采用一位一位进行计算,一位一位 ...

  4. 深入浅出WPF之Binding的使用（二）

    在上一篇中介绍了Binding的基本绑定方法,这一篇中我们在深入的介绍Binding的其他用法. Binding的源也就是数据的源头,在日常的工作中,除了使用像上一篇中的Student对象作为数据源外 ...

  5. mui---子页面调用父页面的自定义方法

    目前在开发APP的时候,有这样的一个需求:需要在登录页面返回后能够刷新父页面. 功能是这样的:在 A.html页面有头像和用户昵称,这些信息需要用户进行登录才能够拿到,登录页面是在B.html,点击A ...

  6. 2018牛客网暑期ACM多校训练营（第三场） H - Diff-prime Pairs - [欧拉筛法求素数]

    题目链接:https://www.nowcoder.com/acm/contest/141/H 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K ...

  7. HDU 1789 - Doing Homework again - [贪心+优先队列]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1789 Time Limit: 1000/1000 MS (Java/Others) Memory Li ...

  8. Kettle 4.2源码分析第三讲--Kettle 转换机制transformation介绍

    转换机制 每个转换步骤都是ETL数据流里面的一个任务.转换步骤包括输入.处理和输出.输入步骤从外部数据源获取数据,例如文件或者数据库:处理步骤处理数据流,字段计算,流处理等,例如整合或者过滤.输出步骤 ...

  9. Gym - 101532D Counting Test 前缀和统计字符串

    题意:给你一个1e4长的字符串S,有1e5个询问,每个询问形如 l r c ,其中l,r为左右边界,c为所询问的字符.注意,l,r,可以大于串S的长度,这种情况下认为S自身重复无数次(S+S+S··· ...

  10. postgresql安装、可整理成一键安装PG脚本

    yum -y install gcc make readline zlib readline-devel zlib-develtar -jxvf postgresql-9.5.2.tar.bz2cd ...