前端工程化
1.vite为什么比webpack快（vite和webpack的区别）
- bundle和bundleless：在webpacket进行打包时会先从入口文件entry去收集所有文件的依赖关系然后进行打包，这也是webpack打包慢的主要原因。而vite则充分利用了浏览器的性能，在主流浏览器中基本都支持es module的导入功能，只需要在script标签上加上type=module就行，将部分的打包工作交由浏览器处理，当需要加载文件大的时候才打包。
- vite比webpack更快的原因还有一个是因为vite在生产模式下使用es build进行打包，es build是使用go语言编写的，具有更加高效的打包性能。而webpack是使用node编写的，JavaScript是单线程的，无法利用多核cpu的优势。
- vite使用http2：http2相比于http1添加了很多新的特性，比如采用二进制的形式传输，头部压缩，多路复用，服务器端推送等。
- vite在实现HMR时也进行了优化，在webpack中模块的更新需要所有的文件全部进行打包，虽然引入的缓存的策略，但还是无法从根本上解决问题。而在vite中模块的每次更新都会使用webpack通知浏览器重新发送请求，只针对更新的文件进行重新编译。
vite比较适用于小型的需要快速开发的项目，vite鼓励零配置，但也提供了相应的扩展功能。webpack比较适用于一些大型的需要复杂插件配置的项目。
2.在执行npm install时会发生什么？
在执行npm install时，会先找npm的配置文件.npmrc，查找的方式是先找项目级的.npmrc，然后是用户级的，全局下的.npmrc，如果都没有的化就会去找npm安装位置的.npmrc。之后查找有没有package-lock.json文件，如果没有则构建依赖书，下载依赖并更新package-lock.json文件。如果有，就对比package.json和package-lock.json中依赖的版本号一不一致，如果一致，去查找有没有缓存，如果有，就直接将缓存中的文件解压到node_modules目录下，如果没有就下载依赖。如果package.json和package-lock.json中依赖的版本号不一致时，则使用package.json中的版本号进行下载，下载完毕后再去更新package-lock.json。
在依赖下载的过程中，采用扁平化的方式进行下载，即不管这个依赖是直接的依赖还是某个依赖的子依赖，全部将依赖下载到node_modules的根目录下，但在不理想的情况下，比如两个依赖同时依赖了一个不同版本的依赖，那会会在依赖下面再创建一个node_modules文件夹去存放。在遍历依赖树时，采用广度优先搜索算法进行遍历。如果发现某个依赖不适配其他依赖的版本，就会尝试下载一个合适版本的依赖进行安装。
3.在执行npm run时会发生什么？
首先，会去找package.json的bin中配置的命令，而命令所配置的可执行文件在node_modules的.bin目录下。如果没有找到就去全局的node_modules文件夹下查找，就是执行-g所安装的那个文件夹。
4.设计模式MVC，MVP，MVVM
首先，这三种设计模式都是为了解决数据和Dom操作过于耦合的问题。
在MVC中，主要分为三层：Model，View和Controller层。Model主要是用于存储应用的数据而View层则进行视图相关的操作。Controller层用户处理用户的交互操作。当用户进行交互操作时，首先要通知Controller层，Controller层再通知Model层，最后Model层通知View层进行视图的更新。这样做的一个好处就是将数据和视图层进行了分离，但是每次都需要写Model，View和Controller层三层的代码，维护起来比较差。后来也出现了View层可以直接修改Model层的MVC架构。但是这么做当Model层的数据发生变化了，不好确定是Controller层引起的数据变化还是View层引起的数据变化，而且Controller层好像也变得很鸡肋，可有可无。
而MVP的架构中，将Controller层变为了Persenter层。主要就是解决MVC模式数据流向不清的问题。Model层和View层的变化都会经由Persenter层处理，而Model层和View层不能直接进行数据的交互。这样出现的另外一个问题就是随着项目越来越大，Persenter层会变得越来越大。
在MVVM的架构中，将Controller层变味了ViewModel层。使用数据响应式以及事件监听的方式简化了用户对Dom的操作，使用虚拟Dom进行页面渲染的性能优化。使得在开发的过程中，只需要关注具体的业务逻辑实现，而不必关注Dom操作的细节。像Vue，React和Angular框架都是基于MVVM架构的。
5.webpack常用的插件
- ESLintWebpackPlugin
- HtmlWebpackPlugin
- CopyPlugin
- MinCssExtractPlugin
- VueLoaderPlugin
- DefinePlugin
- ImageMinmizerPlugin
- unplugin-auto-import
- postcss-pxtorem
