Vue项目使用CDN优化首屏加载问题


Posted in Javascript onApril 01, 2018

前言

作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是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体积有所下降了。通过开发者模式的Network工具,可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN,加载速度比自已的服务器更快。

总结

Javascript 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
js实现搜索栏效果
Nov 16 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
对Angular中单向数据流的深入理解
Mar 31 #Javascript
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
Postman模拟发送带token的请求方法
Mar 31 #Javascript
浅谈Postman解决token传参的问题
Mar 31 #Javascript
postman+json+springmvc测试批量添加实例
Mar 31 #Javascript
You might like
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python多线程下载文件的方法
2015/07/10 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python 拼接文件路径的方法
2018/10/23 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
django列表筛选功能的实现代码
2020/03/27 Python
python学生管理系统的实现
2020/04/05 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
党员学习十八大感想
2014/01/17 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
迎国庆横幅标语
2014/10/08 职场文书
单位婚育证明范本
2014/11/21 职场文书
学生会干部任命书
2015/09/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书