前言

作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

下面，以引入vue、vuex、vue-router为例，说明处理流程。

一、资源引入

在index.html中，添加CDN资源，例如bootstrap上的资源：

<body>

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

    <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>

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

  </body>

二、添加配置

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：

module.exports = {

  entry: {

    app: './src/main.js'

  },

  externals:{

    'vue': 'Vue',

    'vue-router': 'VueRouter',

    'vuex':'Vuex'

  }

注意一点：

格式为 'aaa' : 'bbb', 其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter.

三、去掉原有的引用

去掉import，如：

// import Vue from 'vue'

// import Router from 'vue-router'

去掉Vue.use(XXX)，如：

// Vue.use(Router)

测试

重新npm run build，会看到 vendor.js体积有所下降了。我自已的个人主页中，将所有的外部模块，使用CDN引入之后，vendor.js从1M，降为30k左右。

通过开发者模式的Network工具，可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN，减轻了带宽压力。

Vue项目使用CDN优化首屏加载的更多相关文章

  1. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

  2. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  3. Vue优化首屏加载

    背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...

  4. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  5. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  6. SPA 首屏加载性能优化之 vue-cli3 拆包配置

    前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...

  7. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  8. 轻松大幅度降低 Meteor App 的首屏加载时间

    许多研究表明,用户最满意的网页加载时间是在2秒以下.能够忍受的较长等待时间上限大概在6-8秒之间.如果需要等待12秒,99%以上的用户会关闭网页离开. 所以如果要给用户提供愉快的使用体验,尽量做到 2 ...

  9. 关于VUE首屏加载过长的优化，VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

随机推荐

  1. jquery Dialog弹框插件使用

    var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...

  2. mac下安装ELK

    本文主要为自己所走弯路而做的补充,对小白(比如我)来讲某些博客讲的还是高深了,特地来此补充说明一些东西. 主要步骤参考http://blog.csdn.net/ywheel1989/article/d ...

  3. 【原】Spring源码浅析系列-导入源码到Eclipse

    用了Spring几年,平时也断断续续在项目里看过一些源码,大多都是比较模糊的,因为一旦从一个地方进去就找不到方向了,只能知道它大概是做了什么事能达到这个功能或者效果,至于细节一般没有太深入去研究.后来 ...

  4. C# SerialPort自定义串口DCB

    C# SerialPort自定义串口DCBChange DCB fields from SerialPort instance CPS:中文DCB结构详解表 译自Change DCB fields f ...

  5. 【转载】 Spark性能优化：资源调优篇

    在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...

  6. Keras官方中文文档：Keras安装和配置指南(Linux)

    关于计算机的硬件配置说明 推荐配置 如果您是高校学生或者高级研究人员,并且实验室或者个人资金充沛,建议您采用如下配置: 主板:X299型号或Z270型号 CPU: i7-6950X或i7-7700K ...

  7. 通过分析HSL/HSB获取图片主色调

    这两天稍微研究了一下颜色的HSL/HSB值,主要因为写程序想要实现通过一张图片拿到图片中的最突出的颜色值(类似Groove Music中播放栏背景就是从专辑封面中取出主色调,还有Windows 10任 ...

  8. java线程安全问题以及使用synchronized解决线程安全问题的几种方式

    一.线程安全问题 1.产生原因 我们使用java多线程的时候,最让我们头疼的莫过于多线程引起的线程安全问题,那么线程安全问题到底是如何产生的呢?究其本质,是因为多条线程操作同一数据的过程中,破坏了数据 ...

  9. 洛谷P4180 [Beijing2010组队]次小生成树Tree（最小生成树,LCT,主席树,倍增LCA,倍增,树链剖分）

    洛谷题目传送门 %%%TPLY巨佬和ysner巨佬%%% 他们的题解 思路分析 具体思路都在各位巨佬的题解中.这题做法挺多的,我就不对每个都详细讲了,泛泛而谈吧. 大多数算法都要用kruskal把最小 ...

  10. 【Luogu1337】平衡点（模拟退火）

    [Luogu1337]平衡点(模拟退火) 题面 洛谷 题解 和BZOJ3680吊打XXX是一样的.. 但是数据很强呀.. 疯狂调参 各种WA... 很无奈呀.... #include<iostr ...