详解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 相关文章推荐
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
javascript事件模型介绍
May 31 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
港湾网络笔试题
2014/04/19 面试题
尽职尽责村干部自我鉴定
2014/01/23 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
创建青年文明号材料
2014/05/09 职场文书
七夕情人节促销方案
2014/06/07 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年清明节活动总结
2015/02/09 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
交通安全月活动总结
2015/05/08 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL