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

序

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

使用Vue开发项目时，如果要使用其单文件组件特性，必须使用webpack或browserify进行打包。对于大型应用，为了提高加载速度，可以使用webpack的代码拆分功能进行拆分打包，生成更小的模块，根据需要进行加载，这些在Vue文档和vue-router文档中都有介绍：Async Components和Lazy Loading。

webpack的代码拆分可以使用特殊的require语法，保证webpack或回调的AMD风格的require语法，以AMD风格的回调require语法为例——

全局注册异步组件：

让my sync component=resolve={ require([)。/my-async-component']，resolve)} vue . Component(' Async-web pack-example '，myasync Component)在本地注册Async Component，脚本块内容在单个文件组件中：

让myasync组件=resolve={require ([)。/my-async-component']，resolve)}//vue扩展实例选项，其他选项为导出默认{ components 3360 { ' async-web pack-example ' : myasync component } }使用vue-router时，为了实现不同路由下组件的异步加载，可以在路由映射中以同样的方式设置路由项的组件属性。

MyAsyncComponent在这里定义为工厂函数，必要时使用vue或vue-router定义的解析回调函数来解析组件选项(是的，Vue和vue-router中有两种不同的解析组件选项的函数)。为参数执行callback-require函数(resolve回调函数的参数是组件选项)。这样，在执行打包脚本时，my-async-component.vue文件将被单独打包到一个文件中，并且只有在组件被使用时才会被加载。

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

本文介绍了如何将多个组件组合并打包成一个文件。一方面，它可以减少代码块的数量。另一方面，如果组合封装后的组件在不同的地方重用，由于Vue的缓存机制，可以加快后续组件的加载速度。如果这些常用组件长时间不变(比如UI相关组件)，打包生成的文件长时间不变，可以充分利用浏览器的缓存功能，优化前端的加载速度。

在使用vue-router的SPA应用程序中，除了根路由之外，对应于路由项的ComponentA、ComponentB和ComponentC三个组件被组合并打包成一个文件。第一次加载页面时，从开发人员工具的Network面板可以看到，此时没有加载包含三个组件，即ComponentA、ComponentB和ComponentC的0 . a5a1 BAE 6 ddad 442 AC 82 . js文件。当点击页面A链接时，文件被加载，然后当点击页面B和页面C链接时，文件不被重新加载。

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

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

出口。组件a=必需('。/component a’)导出。组件b=必需('。/component b’)导出。组件c=必需('。/component c’)所以，我们只需要使用webpack的request . assure的特殊语法或者AMD风格的callback-request的语法，异步加载CommonComponents目录下的index.js。当使用webpack进行打包时，我们可以组合并打包三个组件，即组件a、组件b和组件C.以AMD风格的回调要求语法为例，演示如下。这里对回调函数的形式没有特殊要求。

require([' component/CommonComponents ']，当函数(CommonComponents){//对common components})组件/common components模块成功加载后，这里回调函数中的common components参数将是一个包含三个组件选项的对象：ComponentA、ComponentB和component c。

定义异步解析组件时，我们使用工厂函数resolve={require ([)。/my-async-component']，resolve)}。如果需要在路由配置文件中添加一个组件属性为ComponentA的路由项，应该定义什么样的工厂函数？记住这里的resolve是一个解析组件选项的回调函数，它的参数是得到的组件选项，而前面代码中的CommonComponents恰好是一个包含多个组件选项的对象，所以我们可以使用CommonComponents的子属性作为resolve调用的参数，我们编写了一个函数getCommonComponent，用来返回工厂函数，根据组件名称获取相应的组件选项。

让getCommonComponent=component name=resolve=require([' Components/common Components ']，Components=resolve(Components[component name])在组件模板或路由映射中使用其中一个组件时，可以使用类似getCommonComponent('ComponentA ')的函数调用进行组件设置。在路线图中使用的示例如下：

routes: [ { path: '/'，名为： 'Hello '，component: Hello }，{ path: '/a '，名为： 'A '，component : getcommon component(' component A ')}，{ path: '/b '，名为： 'B '，component : getcommon component(' component B ')}，{ path 3: '/c '，名为name: ' c '

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。