详解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 相关文章推荐
html下载本地
Jun 19 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
canvas绘制多边形
Feb 24 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP模块memcached使用指南
2014/12/08 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Vuex之理解state的用法实例
2017/04/19 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
解析Python编程中的包结构
2015/10/25 Python
python脚本监控docker容器
2016/04/27 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python反编译学习之字节码详解
2019/05/19 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
党员评议个人总结
2014/10/20 职场文书
员工表扬信怎么写
2015/05/05 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python