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中children()与find()的区别介绍
Apr 26 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
网络传输协议(http协议)
Nov 18 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
Javascript webpack动态import
Apr 19 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 session处理的定制
2009/03/16 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
jQuery 选择器详解
2015/01/19 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
会计自荐书
2013/12/02 职场文书
百度吧主申请感言
2014/01/12 职场文书
中学生自我评价范文
2014/02/08 职场文书
秸秆管理实施方案
2014/03/15 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技