Vue.js中用webpack合并打包多个组件并实现按需加载


Posted in Javascript onFebruary 17, 2017

前言

随着移动设备的升级、网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码。webpack作为一种模块化打包工具,随着react的流行也越来越流行。

使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能进行分割打包,生成较小的模块并按需加载,这在 Vue 文档及 vue-router 文档中均有介绍:Async Components、Lazy Loading。

webpack 的 code split 可以使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法,以 AMD 风格的 callback-require 语法为例——

全局注册 Async Component:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

局部注册 Async Component,单文件组件中 script 块内容:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}

// Vue 扩展实例选项,其他选项略
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

在使用 vue-router 时,为实现不同路由下的组件异步加载,在路由映射中可以使用同样的方式来设置路由项的 component 属性。

这里的 myAsyncComponent 被定义为一个工厂函数,在需要时才会以 Vue 或者 vue-router 定义的用于解析组件选项的 resolve 回调函数(是的,在 Vue 和 vue-router 中有两个不同的解析组件选项的函数)为参数执行 callback-require 函数(resolve 回调函数的参数是组件选项),这样,在执行打包脚本时,my-async-component.vue 文件会被单独打包成一个文件,并且仅当该组件被使用时才会加载。

当要求异步加载的组件较多时,将会生成更多的单个文件,对于前端性能而言,虽然每个文件更小了,但可能意味着更多的网络连接建立和关闭的开销,因此在前端优化的实践中,通常需要在文件数量和单个文件大小之间取得平衡。

本文介绍如何将多个组件合并打包成一个单独的文件,一方面可以减少代码块的数量,另一方面,如果合并打包的这些组件在不同地方多次重复使用,由于 Vue 的缓存机制,可以加快后续组件的加载速度,并且如果这些通用组件长时间不会变化(如 UI 相关的组件),打包生成的文件也长期不会变化,可以充分利用浏览器的缓存功能,实现前端加载速度的优化。

先上效果图,在使用 vue-router 的 SPA 应用中,将除根路由之外的路由项对应的 ComponentA、ComponentB、ComponentC 等三个组件合并打包成一个文件。初次加载页面时,从开发者工具的 Network 面板上可以看到,此时未加载包含 ComponentA、ComponentB、ComponentC 这三个组件的 0.a5a1bae6addad442ac82.js 文件,当点击 Page A 链接时,加载了该文件,然后再点击 Page B、Page C 链接时,没有重新加载该文件。

Vue.js中用webpack合并打包多个组件并实现按需加载

我们首先通过 vue-cli 命令行工具使用 webpack 项目模板创建一个包含 vue-router 的项目,在其 src/components 目录下创建一个 CommonComponents 目录,在该目录中创建 ComponentA、ComponentB、ComponentC 这三个组件。

Vue.js中用webpack合并打包多个组件并实现按需加载

同时在 CommonComponents 目录下创建 index.js,其内容如下:

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

这样,我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js,在使用 webpack 进行打包时,就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下,这里的 callback 回调函数的形式没有任何特殊要求。

require(['component/CommonComponents'], function (CommonComponents) {
 // do whatever you want with CommonComponents
})

component/CommonComponents 模块加载成功时,这里的回调函数中的 CommonComponents 参数将会是一个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。

在定义异步解析组件时,我们使用的是一个工厂函数 resolve => {require(['./my-async-component'], resolve)},如果需要在路由配置文件中添加 component 属性为 ComponentA 组件的路由项,应该定义什么样的工厂函数呢?记住这里的 resolve 是一个用于解析组件选项的回调函数,其参数是所获取的组件选项,而上一段代码中的 CommonComponents 恰好是包含若干个组件选项的对象,因此我们可以将 CommonComponents 的子属性作为参数用于 resolve 调用,我们编写一个函数 getCommonComponent,用于根据组件名称返回获取相应的组件选项的工厂函数。

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

在组件模板或者路由映射等使用其中某一个组件的地方,可以使用类似于 getCommonComponent('ComponentA') 这样的函数调用进行组件设置,在路由映射中的使用示例如下:

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

最终打包生成的文件列表如下图所示,其中的 0.a5a1bae6addad442ac82.js 包含了 ComponentA、ComponentB、ComponentC 这三个组件。

Vue.js中用webpack合并打包多个组件并实现按需加载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
javascript date格式化示例
Sep 25 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
vue实现在线学生录入系统
May 30 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
浅析JavaScript中var that=this
Feb 17 #Javascript
Bootstrap表格使用方法详解
Feb 17 #Javascript
BootStrap与Select2使用小结
Feb 17 #Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 #Javascript
Vue.js原理分析之observer模块详解
Feb 17 #Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 #Javascript
Bootstrap表单使用方法详解
Feb 17 #Javascript
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python进阶之尾递归的用法实例
2018/01/31 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
客户服务经理岗位职责
2014/01/29 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
学校工会工作总结2015
2015/05/19 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python