配置vite自动按需引入 vant 组件

为什么学

        按需加载可以减少包体积,优化加载性能

学习内容

        全局注册组件

  • import 需要的组件
  • import 组件样式
  • 使用 app.use 注册组件

        Tree Shaking 介绍使用

        什么是 tree shaking?

Tree shaking是一种优化技术,用于减少JavaScript或其他编程语言中未被使用的代码的体积,从而提高应用程序的性能和加载速度。它的原理是通过静态分析代码,识别出未被引用的模块和代码块,并将其在编译过程中移除无用的资源,包括JS代码、CSS文件

实现方法:

        使用了es6语法

  • import
  • export

        插件按需自动引入组件

  • 安装插件
    • npm i unplugin-vue-components -D
  • 在vite.config.js中配置插件
  • 直接在模板中使用Vant组件(存在函数式组件)
  • 引入函数组件的样式-GG

重点&难点

        注册组件的方式,以及了解 Tree Shaking 的作用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/443494.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EAS之WALT算法介绍

EAS调度器缘起 Linux内核的一直都使用完全公平调度器CFS(Completely Fair Scheduler)作为默认调度器,但是在使用中发现CFS如下几个问题。 1. CFS主要是为了服务器性能优先场景而设计的,主要目标是最大限度地提高系统的吞吐量,CFS调度的目标…

IDEA快捷键大全

提示: ① 主要记录我在使用 IDEA 开发的过程中用到的快捷键,可以提高开发速度。 ② 不一定要全部记住,主要是当一个参考文档,大家有一点印象,随时可以查看。 参考博客 > IntelliJ IDEA 快捷键说明大全(官…

写静态页面——浮动练习

0、效果&#xff1a; 1、html代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>浮动…

漏洞原理XSS存贮型漏洞

漏洞原理XSS存贮型漏洞 XSS(跨站脚本攻击)是一种常见的Web安全漏洞,它允许攻击者将恶意代码注入到网页中,进而攻击用户的浏览器。存储型XSS漏洞是一种特定类型的XSS漏洞,它发生在Web应用程序中,其中用户输入的数据被存储在数据库或其他持久性存储中,并在页面重新加载时被…

【2024-01-20】 瑞幸咖啡小程序-blackbox

需要联系主页V 瑞幸咖啡小程序 登入需要过同盾滑块下单需要balckbox参数 测试 下单 过滑块 登入发短信 加密参数

CANoe实际项目中文件夹的规划

本人&#xff0c;之前设计了一个CANoe工程&#xff0c;由于工程设计之初没有设计好文档的归纳分类&#xff0c;导致文件查找起来非常费劲。 为了避免以后出现文件混乱&#xff0c;不可查找的问题&#xff0c;故特此归纳说明。 建立工程时&#xff1a; 第1步就应该设计好文档…

【Vue】2-2、MVVM 简介

一、MVVM 简介 MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。 MVVM 指的是 Model、View 和 ViewModel &#xff0c;它把每个 html 页面都拆分成了这三个部分 二、MVVM 工作原理 ViewModel 作为 MVVM 的核心&#xff0c;是它把当前页面的数据源&#xff08;Model…

SpringBoot+BCrypt算法加密

BCrypt是一种密码哈希函数&#xff0c;BCrypt算法使用“盐”来加密密码&#xff0c;这是一种随机生成的字符串&#xff0c;可以在密码加密过程中使用&#xff0c;以确保每次加密结果都不同。盐的使用增强了安全性&#xff0c;因为攻击者需要花费更多的时间来破解密码。 下图为…

spark-cannot resolve overloaded method

使用split方法&#xff0c;出现错误&#xff1a;cannot resolve overloaded method 解决方法:那个regex应该是自动生成&#xff0c;所以split括号中输入空引号即可。 入门学习人的愚笨&#xff0c;也要继续坚持&#xff0c;加油&#xff01;

小程序软件测试应该怎么做?有什么作用?

近年来&#xff0c;随着移动互联网的快速发展&#xff0c;小程序软件的使用越来越广泛。无论是企业推广还是个人创作&#xff0c;小程序软件都具备了很大的潜力和市场空间。然而&#xff0c;在发布之前&#xff0c;进行充分的测试是至关重要的&#xff0c;以确保用户体验的顺畅…

每日一道Java面试题:说一说Java中的泛型?

写在开头 今天的每日一道Java面试题聊的是Java中的泛型&#xff0c;泛型在面试的时候偶尔会被提及&#xff0c;频率不是特别高&#xff0c;但在日后的开发工作中&#xff0c;却是是个高频词汇&#xff0c;因此&#xff0c;我们有必要去认真的学习它。 泛型的定义 什么是泛型…

设计模式之框架源码剖析(实战+图解)

Java设计模式 1&#xff0c;概述 随着软件开发人员人数的增多&#xff0c;一些公司急需一些高端人才。作为一个高端人才&#xff0c;设计面向对象软件是必不可少的能力&#xff0c;而软件设计是需要很深的功力&#xff0c;设计模式就要求你必须掌握。 2&#xff0c;本章特色…