将Vue组件库更换为按需加载的方法步骤(3)

module.exports = { presets: ["@vue/app", ["@babel/preset-env", { "modules": false }]], plugins: [ [ "import", { "libraryName": "jr-ui", "style": (name) => { return `${name}/style.css`; } } ] ] }

基础导出

import JRUI_base from "jr-ui/lib/base"; import "jr-ui/lib/base/index.css"; Vue.use(JRUI_base); // 按需使用额外引入的组件 import { MusicPlayer } from "jr-ui"; Vue.use(MusicPlayer);

业务系统中调试组件库代码

如果仍然想调试组件库代码，在引入组件时，直接引入组件库依赖内的 components 下的组件导出文件并覆盖安装。就能调试目标组件。

import button from "jr-ui/src/components/button"; Vue.use(button);

优化效果

在组件库较大的情况下，优化效果非常明显。在使用基础组件时，体积小了一兆。而且还减少了很多组件内不必要的第三方依赖文件资源。

案例仓库地址，如有疑问和错误的地方，欢迎大家提问或指出。
祝你有个快乐的劳动节假期 :)
Have a nice day.

参考资料

babel-plugin-import

到此这篇关于将Vue组件库更换为按需加载的方法步骤的文章就介绍到这了,更多相关Vue组件库更换为按需加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: