vue-cli 首屏加载优化问题


Posted in Javascript onNovember 06, 2018

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体,

打包位置是 dist/static/js/app.[contenthash].js  

类似下面的路由代码

router/index.js 路由相关信息,该路由文件引入了多个 .vue组件
import Personal from '@/components/page/Personal'
import Message from '@/components/personnal/Message'
import Settings from '@/components/personnal/Settings'
import Setlanguage from '@/components/personnal/children/Setlanguage'

npm run build 会打包成一个app.[contenthash].js,这个文件会非常大,影响加载速度。

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去

分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,

相同 chunk名字的模块将会打包到一起。

const Personal = r=>require.ensure([],()=>r(require('@/components/page/Personal')),'personal');
const Message = r=>require.ensure([],()=>r(require('@/components/personnal/Message')),'personal');
const Settings = r=>require.ensure([],()=>r(require('@/components/personnal/Settings')),'personal');
const Setlanguage = r=>require.ensure([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');

根据 chunname的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)

总结

以上所述是小编给大家介绍的vue-cli 首屏加载优化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
JavaScript引用类型Array实例分析
Jul 24 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 #Javascript
vue组件tabbar使用方法详解
Nov 06 #Javascript
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
杏林同学录(一)
2006/10/09 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
详解YII关联查询
2016/01/10 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
浅谈Python 对象内存占用
2016/07/15 Python
python爬虫超时的处理的实例
2018/12/19 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
三峡导游词
2015/01/31 职场文书
个人总结怎么写
2015/02/26 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
网吧温馨提示
2015/07/17 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers