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 兼容鼠标滚轮事件
Apr 07 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
js实现筛选功能
Nov 24 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
JavaScript 变量基础知识
2009/11/07 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
JavaScript如何操作css
2020/10/24 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python变量和字符串详解
2017/04/29 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python3中的json模块使用详解
2018/05/05 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
中软Java笔试题
2012/11/11 面试题
C#笔试题
2015/07/14 面试题
Servlet面试题库
2015/07/18 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
资料员岗位职责
2013/11/17 职场文书
2014植树节活动总结
2014/03/11 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
师范生求职自荐信
2014/06/14 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript