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 css在IE和Firefox中区别分析
Feb 18 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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缓存机制Output Control详解
2014/07/14 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php利用header函数下载各种文件
2016/08/24 PHP
php四种定界符详解
2017/02/16 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python字符串中查找子串小技巧
2015/04/10 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python离线安装外部依赖包的实现
2020/02/13 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
jupyter 导入csv文件方式
2020/04/21 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
学生实习自我鉴定
2013/10/11 职场文书
小学教师师德感言
2014/02/10 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
班训口号大全
2014/06/18 职场文书
安全隐患整改报告
2014/11/06 职场文书
八年级英语教学计划
2015/01/23 职场文书