Vue.js中⽤webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新，所以多多少少要对组件化有点了解，下⾯这篇⽂章主要给⼤家介绍了在Vue.js中⽤webpack合并打包多个组件并实现按需加载的相关资料，需要的朋友可以参考下。
前⾔
随着移动设备的升级、⽹络速度的提⾼，⽤户对于web应⽤的要求越来越⾼，web应⽤要提供的功能越来越。功能的增加导致的最直观的后果就是资源⽂件越来越⼤。为了维护越来越庞⼤的客户端代码，提出了模块化的概念来组织代码。webpack作为⼀种模块化打包⼯具，随着react的流⾏也越来越流⾏。
webpack打包流程 面试
使⽤ Vue 开发项⽬时，如果要使⽤其单⽂件组件特性，必然要使⽤ webpack 或者 browserify 进⾏打包，对于⼤型应⽤，为了提升加载速度，可以使⽤ webpack 的 code split 功能进⾏分割打包，⽣成较⼩的模块并按需加载，这在 Vue ⽂档及 vue-router ⽂档中均有介绍：、。
webpack 的 code split 可以使⽤ webpack 的 sure 特殊语法或者使⽤ AMD 风格的 callback-require 语法，以 AMD 风格的callback-require 语法为例——
全局注册 Async Component：
1 2 3 4let myAsyncComponent = resolve => {
require(['./my-async-component'], resolve)
}
Vueponent('async-webpack-example', myAsyncComponent)
局部注册 Async Component，单⽂件组件中 script 块内容：
1 2 3 4 5 6 7 8 9 10let 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，其内容如下：
1 2 3exports.ComponentA = require('./ComponentA') exports.ComponentB = require('./ComponentB') exports.ComponentC = require('./ComponentC')
这样，我们只需要使⽤ webpack 的 sure 特殊语法或者使⽤ AMD 风格的 callback-require 语法异步加载 CommonComponents ⽬录下的 index.js，在使⽤ webpack 进⾏打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例⽰范如下，这⾥的 callback 回调函数的形式没有任何特殊要求。
1 2require(['component/CommonComponents'], function(CommonComponents) { // do whatever you want with CommonComponents
3})
component/CommonComponents 模块加载成功时，这⾥的回调函数中的 CommonComponents 参数将会是⼀个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。
在定义异步解析组件时，我们使⽤的是⼀个⼯⼚函数 resolve => {require(['./my-async-component'], resolve)}，如果需要在路由配置⽂件中添加 component 属性为 ComponentA 组件的路由项，应该定义什么样的⼯⼚函数呢？记住这⾥的 resolve 是⼀个⽤于解析组件选项的回调函数，其参数是所获取的组件选项，⽽上⼀段代码中的 CommonComponents 恰好是包含若⼲个组件选项的对象，因此我们可以将CommonComponents 的⼦属性作为参数⽤于 resolve 调⽤，我们编写⼀个函数 getCommonComponent，⽤于根据组件名称返回获取相应的组件选项的⼯⼚函数。
1let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))
在组件模板或者路由映射等使⽤其中某⼀个组件的地⽅，可以使⽤类似于 getCommonComponent('Co
mponentA') 这样的函数调⽤进⾏组件设置，在路由映射中的使⽤⽰例如下：
1
2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22routes: [
{
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 这三个组件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。