## **vite和webpack的区别** vite优点：**快速冷启动、按需编译、模块热更新** - webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。 - 现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。 vite利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，vite在启动的时候不需要打包，不需要分析模块的依赖和编译，因此**启动速度快**。 - 当浏览器请求某个模块时，再根据需要对模块内容进行编译。**按需动态编译**缩减了编译时间。 - **HMR方面**，当改动了一个模块后，仅需让浏览器重新请求该模块，而webpack需要把该模块的相关依赖模块全部编译一次，效率更高。 >Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。虽然webpack 也采用的是局部热更新并且是有缓存机制的，但是还是需要重新打包所以很大的代码项目是真的有卡顿的现象 >文件缓存：Vite 会将预构建的依赖缓存到node_modules/.vite。它根据几个源来决定是否需要重新运行预构建步骤：package.json中的 dependencies列表， package-lock等 浏览器缓存：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存 ### **缺点** - 生态不如webpack：wepback的loader和plugin非常丰富 - prod环境的构建用Rollup：esbuild对于css和代码分割不是很友好 - **vite的主要优势在开发阶段**。另外，由于vite利用的是ES Module，因此在代码中不可以使用CommonJS ## **Vite 的原理** Vite 实现的核心——**拦截浏览器对模块的请求并返回处理后的结果**。 >浏览器发起的第一个请求 localhost:3000/，发送到 Vite 后端之后经过静态资源服务器的处理，会进而请求到 index.html，Vite对这个请求做拦截和处理了 把原本一个 .vue 的文件拆成了2个请求（分别对应 template和script、style ） ，浏览器会先收到包含 script和template 逻辑的 App.vue 的响应，然后解析到 style 的路径后，会再次发起 HTTP 请求来请求对应的资源，此时 Vite 对其拦截并再次处理后返回相应的内容。 * vite1: 使用的是 koa * vite2: 使用的是 Connext; Connext更加是个转发 **请求服务器 --> 获取自己的代码 --> Connext拦截 -->vite工具处理成 es6.js代码---> Connext转发--->发送给浏览器** ## **ESBuild** vite打包快：基于ESBuild，ESbuild 是一个类似webpack构建工具。 - ESBuild为什么这么快? >使用GO语言编写的, 可以直接转换成机器代码, 而无需经过字节码; ESBuild利用CPU的多内核，尽可能饱和运行； ESBuild的所有内容都是从零开始编写的，而不是使用第三方，考虑各种性能问题; ### vite 搭建项目 ```js npm create vite@latest my-vue-app -- --template vue cd my-vue-app npm install // 或者 npm install -g create-vite-app create-vite-app my-vue-app cd my-vue-app npm install ``` - rollup的打包流程 - vite.config.js常用配置 ```js import { defineConfig } from 'vite' import { resolve } from "path"; // 主要用于alias文件路径别名 import vue from '@vitejs/plugin-vue' import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件 export default defineConfig({ plugins: [vue(), vueJsx()], // 插件列表 base: './', // 在生产中服务时的基本公共路径。 resolve: { alias: { "@": path.resolve(__dirname, './src'), } // 配置别名 }, // 引入第三方的配置,强制预构建插件包 optimizeDeps: { include: ['echarts', 'axios', 'mockjs'], }, // 打包配置 build: { target: 'modules', // 最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器 outDir: 'dist', // 指定输出路径 assetsDir: 'assets', // 指定生成静态资源的存放路径 sourcemap: false, // 构建后是否生成 source map 文件 minify: 'terser' // 混淆器，terser构建后文件体积更小 }, // 本地运行配置，及反向代理配置 server: { host: 'localhost', // 指定服务器主机名 port: 3000, // 指定服务器端口 open: true, // 在服务器启动时自动在浏览器中打开应用程序 strictPort: false, // false-- 若端口已被占用则会尝试下一个可用端口,而不是直接退出 https: false, // 是否开启 https cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源 proxy: { // 为开发服务器配置自定义代理规则 '/foo': 'http://192.168.xxx.xxx:xxxx', '/api': { target: 'http://192.168.xxx.xxx:xxxx', //代理接口 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }) ```