如何将Vue组件库更换为按需加载

　　介绍

小编这次要给大家分享的是如何将Vue组件库更换为按需加载,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

按需加载演示仓库地址


我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大。

组件库依赖在npm上管理,组件库以项目根目录的指数。js作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法。

索引。js 

导入按钮“。/button";
　　从“进口表。/table";
　　从“进口MusicPlayer。/musicPlayer";
　　
　　从“进口跑龙套. ./utils"
　　进口*指令从“. ./directive";
　　*作为过滤器从导入“. ./filters";={const组件
　　按钮,
　　表格
　　MusicPlayer
　　}
　　
　　const安装=(Vue)=比;{
　　种(组件)。forEach(组件=比;Vue.use(组件));//此处继续完成一些服务的挂载
　　}
　　
　　如果(typeof窗口!==& # 39;未定义# 39;,,window.Vue) {
　　安装(Vue,真实);
　　}
　　
　　出口默认{
　　安装,
　　组件…
　　}

组件库并不导出编译完成后的依赖文件,业务系统使用时,安装依赖并导入,就能注册组件。

从& # 39;进口JRUI jr-ui& # 39;;
　　Vue.use (JRUI);

组件库的编译是交由业务系统的编译服务顺带编译的。

即组件库项目本身不会编译,仅作为组件导出.node_module就像一个免费的云盘,用于存储组件库代码。

因为经业务系统编译,在业务系统中。组件库代码能够和本地文件一样,直接调试。而且非常简单粗暴,并不需要做一些依赖导出的额外配置。

但也存在缺点

    <李>组件库中无法使用更为特殊的代码李

vue-cli会静态编译在node_module引用的.vue文件,但不会编译node_module中的其他文件,一旦组件库代码存在特殊的语法扩展(JSX),或者特殊的语言(打印稿)。此时项目启动会运行失败。

    <李>组件库中使用webpack的特殊变量将不起效李

组件库中的webpack配置不会被业务系统去执行,所以组件库中的路径别名等属性无法使用

    <李>组件库依赖每次都是全量加载李

索引。js本身就是全量的组件导入,所以即使业务系统只使用了部分组件,指数。js也会将所有的组件文件(图片资源,依赖)都打包进去,依赖体积总是全量大小的。

业务系统并不存在只使用一两个组件的情况,每个业务系统都需要绝大部分组件。
几乎每个项目都会使用比如按钮,输入框,下拉选项,表格等常见基础组件。
只有部分组件仅在少数特殊业务线使用,例如富文本编辑器,音乐播放器。


为了解决上述问题,及完成按需引入的效果。提供两种组件导出方式,全量导出,基础导出。
将组件导出分为两种类型。基础组件,按需引入组件。
按需引入组件的评定标准为:

    <李>较少业务系统使用李 <>李组件中包含体积较大或资源文件较多的第三方依赖李 <李>未被其他组件内部引用

全量导出模式导出全部组件,基础导出仅导出基础组件。在需要使用按需引入组件时,需要自行引入对应组件。


参考element-ui的导出方案,组件库导出的组件依赖,要提供每个组件单独打包的依赖文件。

如何将Vue组件库更换为按需加载

全量导出指数。js文件无需改动,在索引。js同级目录增加新文件base.js,用于导出基础组件。

基地。js 

导入按钮“。/Button";
　　从“进口表。/table";={const组件
　　按钮,
　　表格
　　}
　　
　　const安装=(Vue)=比;{
　　种(组件)。forEach(组件=比;Vue.use(组件));
　　}
　　
　　出口默认{
　　安装,
　　组件…
　　}

修改组件库脚手架工具,增加额外打包配置。用于编译组件文件,输出编译后的依赖。

vue.config。js 

 const devConfig=要求(& # 39;。/构建/config.dev& # 39;);
　　const buildConfig=要求(& # 39;。/构建/config.build& # 39;);
　　
　　模块。出口=process.env。NODE_ENV===& # 39;发展# 39;,# 63;devConfig: buildConfig;

config.build。js 

如何将Vue组件库更换为按需加载