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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
JS中如何优雅的使用async await详解
Oct 05 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
详解Python中with语句的用法
2015/04/15 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python文件操作方法详解
2020/02/09 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
11月红领巾广播稿
2014/01/17 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python