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

前言

随着移动设备的升级、网络速度的提高，用户对于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-cli 命令行工具使用 webpack 项目模板创建一个包含 vue-router 的项目，在其 src/components 目录下创建一个 commoncomponents 目录，在该目录中创建 componenta、componentb、componentc 这三个组件。

同时在 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 这三个组件。

总结

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