2024年webpack打包优化-vant按需映入(1)，大厂面试问题

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

• -S 就是–save 将插件安装到生产环境 在package,json中的dependencies 打包会打包到dist中,就是上线也需要用

• -D就是dev将插件安装到开发环境 devDependencies

• 配路由官方推荐首字母大写且两个单词驼峰命名法

1.下载vant

---

// Vue 2 项目，安装 Vant 2：

npm i vant -S

// Vue 3 项目，安装 Vant 3：

npm i vant@next -S

// 通过 yarn 安装

yarn add vant

2.下载所需插件

---

// babel-plugin-import 是一款 babel 插件，

//它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

3.在babel.config.js配置

---

// 在.babelrc 中添加配置

// 注意：webpack 1 无需设置 libraryDirectory

{

“plugins”: [

["import", {

  "libraryName": "vant",

  "libraryDirectory": "es",

  "style": true

}]

]

}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {

plugins: [

['import', {

  libraryName: 'vant',

  libraryDirectory: 'es',

  style: true

}, 'vant']

]

};

4.在页面注册使用

---

分为页面注册组件使用,和全局按需引入使用

<Button type="default">默认按钮</Button>

<Button loading type="primary" loading-type="spinner" />

import { Button } from ‘vant’

export default {

name: ‘home’,

components: {

Button

}

}

4.1 全局使用按需引入

---

在根目录下新建plugins文件,里面新建index.j(名字自己取,如果不引入其他就index就可以)

在该文件中做引入操作，最后将这个文件在man.js内引入

---

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。