详解vue项目优化之按需加载组件-使用webpack require.ensure


Posted in Javascript onJune 13, 2017

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

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

类似下面的路由代码

router/index.js  路由相关信息,该路由文件引入了多个 .vue组件

import Hello from '@/components/Hello'
import Province from '@/components/Province'
import Segment from '@/components/Segment'
import User from '@/components/User'
import Loading from '@/components/Loading'

执行 npm run build 会打包为一个整体 app.[contenthash].js ,这个文件是非常大,可能几兆或者几十兆,加载会很慢

详解vue项目优化之按需加载组件-使用webpack require.ensure

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

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

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

router/index.js 修改为懒加载组件

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname1')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

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

分模块打包之后在 dist目录下是这样的, 这样就把一个大的 js文件分为一个个小的js文件了,按需去下载,其他的使用方法和import的效果一样

详解vue项目优化之按需加载组件-使用webpack require.ensure

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
js实现随机点名
Jan 19 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 #Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 #Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 #Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 #Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python魔法方法-属性访问控制详解
2016/07/25 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
优秀幼教自荐信
2014/02/03 职场文书
中学教师自我鉴定
2014/02/07 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
开学典礼策划方案
2014/05/28 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年药店工作总结
2014/11/20 职场文书