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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
vue实现在线翻译功能
Sep 27 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP SOCKET编程详解
2015/05/22 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python新手学习raise用法
2020/06/03 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
大学毕业自我评价
2014/02/02 职场文书
新教师工作感言
2014/02/16 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
护理实习生带教计划
2015/01/16 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
微信早安问候语
2015/11/10 职场文书