一、概念
1、为什么需要构建工具
在传统的大型项目前端开发中,每次加载网页需要请求上百上千个文件js、css文件,产生大量不必要的网络交互。构建工具的出现解决了这个问题,构建工具会自动的把js或css文件合并成一个或多个文件,获得最佳的加载性能。还能将代码进行 tree-shaking、懒加载和 chunk 分割(以获得更好的缓存)
2、Webpack
Webpack 是一个前端资源加载/打包工具,有入口、出口、loader 和 插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
3、Vite
Vite是一个由原生 ESM 驱动的 Web 开发构建工具。Vite意在提供开箱即用的配置,在开发环境下基于浏览器原生 ES imports 开发,按需编译;在生产环境下基于 Rollup 打包。
二、两者的区别
Webpack | Vite |
先打包生成bundle,再启动开发服务器 | 先启动开发服务器,利用新一代浏览器的ESM能力,无需打包,直接请求所需模块并实时编译 |
HMR时需要把改动模块及相关依赖全部编译 | HMR时只需让浏览器重新请求该模块,同时利用浏览器的缓存(源码模块协商缓存,依赖模块强缓存)来优化请求 |
配置比较复杂 | 配置相对简单 |
打包速度慢 | 打包速度快 |
生成打包可优化性较差 | 生成打包可优化性强 |
三、常见命令
1、Webpack(在node已经安装完成的前提下,全局安装Webpack)
2、Vite(在node已经安装完成的前提下,全局安装Vite;node.js版本>12)
1)Vite跨域(proxy):
① utls.request.js
② 跨域配置-代理所有/api开头的请求
作者:꧁执笔小白꧂