Vant组件按需注册

最新推荐文章于 2023-12-21 22:09:05 发布

UserWu1001

最新推荐文章于 2023-12-21 22:09:05 发布

阅读量1.8k

点赞数 1

分类专栏：小册子文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/UserWu1001/article/details/109241887

版权

本文介绍了如何通过按需注册Vant组件来解决Vue项目中vendor文件过大导致的加载性能问题。全局注册Vant会导致较大的包体积，而按需注册则能显著减小体积，加快3G网络下的加载速度。文章总结了前后端项目中可能遇到的问题，强调了优化第三方依赖和适配多种设备的重要性。

摘要由CSDN通过智能技术生成

项目场景：

解决vue项目打包后vendorxxxxx.js过大的问题
例如：全局注册(1267kb) => 局部注册后(803kb) 3G网络加载时间由7s缩短为4s

接触项目之初，开发者往往将精力投入到功能可行性方面，很难直观的去考虑包的体积，加载性能问题。

import Vue from ‘vue’;
import Vant from ‘vant’; // vant
import ‘vant/lib/index.css’; // css样式

~~Vue.use(vant)~~;

	npm i babel-plugin-import -D //安装插件

需要注意按需注册方式不允许与全局注册方式共同存在

	//在babel.config.js中配置
	plugins: [
		['import', {
			libraryName: 'vant',
			libraryDirectory: 'es',
			style: true
		}, 'vant']
	]

//在具体的view文件中
<van-row>
	<van-col span='11' offset='1'>Hello<

关注

专栏目录