Vite 解决了 Webpack 哪些问题

随着项目的复杂度升级，代码规范和管理就必需要同步提高。因而，编程社区中提出了多种模块化规范，服务端选择了 CommonJS 规范，客户端选择 AMD 规范较多，可是，两种模块化规范也都存在必定的问题，都是 JS 编程，有两个不一样的模块化规范，在 JS 语言层面仍是不够的，终于在 ES6 中，ECMA 委员会推出了语言层面模块系统：ES Modules 规范

模块化能够帮助咱们更好地解决复杂应用开发过程当中的代码组织问题，可是随着模块化思想的引入，咱们的前端应用又会产生了一些新的问题，好比：

• 首先，咱们所使用的 ES Modules 模块系统自己就存在环境兼容问题。尽管现现在主流浏览器的最新版本都支持这一特性，可是目前还没法保证用户的浏览器使用状况。因此咱们还须要解决兼容问题
• 其次，模块化的方式划分出来的模块文件过多，而前端应用又运行在浏览器中，每个文件都须要单独从服务器请求回来。零散的模块文件必然会致使浏览器的频繁发送网络请求，影响应用的工做效率
• 最后，谈一下在实现 JS 模块化的基础上的发散。随着应用日益复杂，在前端应用开发过程当中不单单只有 JavaScript 代码须要模块化，HTML 和 CSS 这些资源文件也会面临须要被模块化的问题。并且从宏观角度来看，这些文件也都应该看做前端应用中的一个模块，只不过这些模块的种类和用途跟 JavaScript 不一样

对于开发过程而言，模块化确定是必要的，因此咱们须要在前面所说的模块化实现的基础之上引入更好的方案或者工具，去解决上面提出的 3 个问题，让咱们的应用在开发阶段继续享受模块化带来的优点，又没必要担忧模块化对生产环境所产生的影响

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）

Vue 脚手架工具 vue-cli 使用 webpack 进行打包，开发时能够启动本地开发服务器，实时预览。由于须要对整个项目文件进行打包，开发服务器启动缓慢

而对于开发时文件修改后的热更新 HMR 也存在一样的问题

Webpack 的热更新会以当前修改的文件为入口从新 build 打包，全部涉及到的依赖也都会被从新加载一次

Vite 则很好地解决了上面的两个问题

打包问题

vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不一样的模块处理，实现真正的按需加载

热更新问题

vite 采用当即编译当前修改文件的办法。同时 vite 还会使用缓存机制( http 缓存 => vite 内置缓存 )，加载更新后的文件内容

因此，vite 具备了快速冷启动、按需编译、模块热更新等优良特质

综上所述，vite 构建项目与 vue-cli 构建的项目在开发模式下仍是有比较大的区别：

• Vite 在开发模式下不须要打包能够直接运行，使用的是 ES6 的模块化加载规则；Vue-CLI 开发模式下必须对项目打包才能够运行
• Vite 基于缓存的热更新，Vue-CLI 基于 Webpack 的热更新