vuejs项目打包之后的首屏加载优化及打包之后出现的问题


Posted in Javascript onApril 01, 2018

一:使用CDN资源

我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样:

1:打开webpack.base.conf.js

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2:打开router/index.js。注销掉以下两行

//import Vue from ‘vue‘
//Vue.use(Router)

3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)注销了

Vue.use(Vuex)

打包后可能出现的问题

1:被keep-alive包围的元素无法显示

原因:暂不明。

解决方法:不用keep-alive

推荐阅读:Vue项目使用CDN优化首屏加载问题

总结

以上所述是小编给大家介绍的vuejs项目打包之后的首屏加载优化及打包之后出现的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
jquery if条件语句的写法
May 19 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue项目使用CDN优化首屏加载问题
Apr 01 #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
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP下MAIL的另一解决方案
2006/10/09 PHP
php&mysql 日期操作小记
2012/02/27 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php网站地图生成类示例
2014/01/13 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Javascript的this详解
2019/03/23 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
使用python实现BLAST
2018/02/12 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python实现抖音点赞功能
2019/04/07 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
学校万圣节活动方案
2014/02/13 职场文书
师德师风建设方案
2014/05/08 职场文书
中学清明节活动总结
2014/07/04 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
信仰纪录片观后感
2015/06/08 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
vue实现移动端div拖动效果
2022/03/03 Vue.js
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android