现代开发中存在的问题

​ 随着时代的进步，我们所开发的项目也不是以前能比的，借用vite官方的描述：当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

这里说的JavaScript 开发的工具就是指的我们在上一章说讲的构建工具，一个快速的开发环境，会极大的提高我们的开发效率

天下苦webpack久矣

​ 相信大家再用webpack开发的时候，明显感觉到，随着我们的项目迭代，webpack启动服务器所耗费的时间也随着提高，当然，或许这都能接受。但是当我们修改文件，虽然基于HMR（热更新），但是我们也会发现需要耗费几秒的时间，这极大影响我们的开发体验。而且这个时间会继续随着我们项目迭代更拉长，后面就更无法接受了。

webpack vs Vite

webpack

编译

​ 我们需要知道在webpack环境下，我们可以使用commonjs、ES Module等模块化方案，他们会被正常编译，做代码转换 然后跑到浏览器，它支持多种模块方案，因为他需要考虑到我们的代码可能跑在服务端，不单单是浏览器。

1
2
import vue from 'vue'
const axios = require('axios')

构建

​ 其次就是构建流程，webpack在敲下npm run dev启动开发服务器的时候，会将项目所有的代码进行打包，然后在启动项目。

Vite

编译

​ 与webpack相比，Vite明显就不需要考虑那么多，它基于ES Module，所以他默认我们使用的模块化方案是ES module，这样他就不需要检测相关依赖，然后为了统一模块化方案而做代码转换。所以说webpack和Vite最大的区别就是：webpack兼容多端，而Vite只关注用户在浏览器的开发体验。

1
2
import vue from 'vue'
const axios = require('axios') // ERROR：require is not a function

构建

​ 恰恰与webpack相反，Vite在用户敲下npm run dev的时候，是先启动开发服务器，然后通过网络请求加载入口文件。并且它是按需加载的，当我们在home路径下，他只会去加载对应home路径的模块，而不会一次性全部加载下来。