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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python中常见的数据类型小结
2015/08/29 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python修改FTP服务器上的文件名
2019/09/11 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
基于python实现操作redis及消息队列
2020/08/27 Python
售后专员岗位职责
2013/12/08 职场文书
五年级数学教学反思
2014/02/11 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
欢迎领导检查标语
2014/06/27 职场文书
工作求职信
2014/07/04 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
活动总结书怎么写
2015/05/11 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
python批量创建变量并赋值操作
2021/06/03 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js