Vue3中的脚手架工具Vite在哪里？它也很容易与第三方库或现有项目集成。因此，Vue完全有能力为复杂的单页应用提供驱动。随着Vue.js3.0的正式发布，这个优秀的前端开发框架迎来了轻量级的环境搭建工具——Vite。Vite是原生ESM驱动的Web开发构建工具。开发环境基于浏览器原生ES导入，生产环境基于Rollup打包开发。今天，就让我们一起认识一下这位新成员吧。Vite的特点：与Webpack相比，Vite有以下特点：快速冷启动，无需等待打包的即时热模块更新，真正的按需编译，无需等待整个项目编译完成。既然完全跳过了打包的概念，ViteWebpack的出现极大地撼动了Webpack的地位，真正做到了服务端即用即用。看来，就连游大神也逃不过“真香”论。Vite的背景和工作方式过去在Webpack、Rollup等构建工具主打明星的时候，Vue的代码都是基于ESModule规范编写的。通过桥接导入和导出，可以在文件之间完美地构建一个巨大的依赖关系图。这些工具会在本地调试时将模块预先打包成浏览器可读的js包格式。为了优化这个过程，有一种懒加载的方法，但是懒加载不能解决构建问题。webpack还是需要提前构建好异步路由需要的模块。随着我们的项目越来越大，项目开始变得越来越慢。但Vite避免了这一点。它顺应时代潮流，继承了众多前人的优点。比如Svelte或者Snowpack，基本把框架编译掉，可以利用现代JavaScript特性（比如ES模块）提供更流畅、更快速的开发体验，几乎不需要配置，也不需要过多依赖.安装软件包。vite可以直接使用浏览器的ES模块搭建开发环境，直接放弃捆绑这一步，比如直接在html文件中写这样的代码：//index.htmlcreateApp(Main).mount('#app')无论我们的应用程序有多大，HMR都可以稳定快速地更新。当捆绑用于生产时，Vite附带了一个预配置的构建命令，可以开箱即用地实现许多性能优化。此外，Vite还可以提供模块热替换，这意味着我们可以在开发过程中在浏览器中看到代码刷新，甚至可以用它来编译一个精简版的项目，直接在生产中使用。通过使用它，我们可以快速启动一个Vue或React项目，而无需再使用VueCLI或CreateReactApp。高效、快速是它的代名词。有趣的事实：“Vite”这个名字来自法语单词“fast”，发音为“vit”。vite的使用和普通开发工具一样。vite提供了一种使用npm或yarn构建项目结构的方法。使用yarn在终端执行：$yarncreatevite-app$cd$yarn$yarndev可以初始化一个vite项目（默认应用模板为vue3.x），生成的项目结构很简单：|____node_modules|____App.vue//应用入口|____index.html//页面入口|____vite.config.js//配置文件|____package.json执行yarndev启动应用。vite启动链接命令分析这部分代码在src/node/cli.ts中，主要内容是使用minimist——一个轻量级的命令分析工具来分析npm脚本，解析出来的函数是resolveOptions，简化后的代码片段如下跟随。functionresolveOptions(){//命令可以开发/构建/优化if(argv._[0]){argv.command=argv._[0];}returnargv;}得到options后，会根据options。command的值判断是执行开发环境需要的runServe命令还是生产环境需要的runBuild命令。if(!options.command||options.command==='serve'){runServe(options)}elseif(options.command==='build'){runBuild(options)}elseif(options.command==='optimize'){runOptimize(options)}在runServe方法中，执行server模块创建开发server方法，同样在runBuild中执行build模块构建方法。最新版本还添加了对优化命令的支持。Vite的作用是去掉了打包这一步。打包的概念是开发者使用打包工具将各种应用模块组装在一起形成一个bundle，并按照一定的规则读取模块的代码——供不支持模块化的浏览器使用。为了在浏览器中加载每个模块，打包工具将使用胶水代码来组装每个模块。比如webpack使用map存储模块id和路径，使用webpack_require方法获取模块导出。Vite利用了浏览器原生支持模块化导入，省略了模块的组装，不需要生成bundle，所以打包的步骤可以省略。实现按需包装。webpack等打包工具会提前将模块打包成bundle，但打包的过程是静态的——无论一个模块的代码是否执行，这个模块都必须被打包成bundle。缺点是随着项目越来越大，打包的包也越来越大。为了减小bundlesize，开发者会使用动态引入import()的方法异步加载模块（导入的模块还是需要提前打包），或者使用treeshaking等方法尽量去掉未引用的modules，但是这些方法都不如vite的优雅，vite只能在需要的时候动态导入某个模块（借助import()），不需要提前打包。虽然只能在开发环境中使用，但是已经足够了。vite如何处理ESMvite使用浏览器中的ES模块通过http请求获取模块，所以vite必须提供一个web服务器来代理这些模块，上面提到的koa就是负责这个的，vite通过劫持请求路径获取的内容资源返回给浏览器，但vite对模块导入做了特殊处理。开发经验在以往的开发经验中，无论是使用Grunt、Gulp、Rollup还是Webpack，如此庞大复杂的项目都会花费大量的时间去调试，确保所有的工具和插件都能正常运行。以后会花更多的时间修复错误，改进捆绑包可以优化并缩短其构建时间。相比之下，Vite就可以游刃有余。测试人员尝试设置四个堆栈，并几乎立即对它们进行了一些自定义。Vite取消了两个工具和插件的捆绑，增加了很多友好的默认设置，你甚至可以跳过配置直接开始工作。如果我们有特定的需求，Vite允许我们自己设置，可以覆盖Rollup和各种Rollup插件的配置。项目中捆绑的工具越多，整体就越脆弱。如果一个组件失败或引入了重大更改，整个过程就会中断，我们必须再次深入研究每个工具和插件及其错综复杂的地方来修复它，Vite从根本上减轻了开发负担。总结总而言之，Vite补充了最近简化工具（如Parcel和Snowpack）的趋势。其简化的设置几乎是一个黑客。如果我们要使用前端框架，我们可能会选择Nuxt、Next.js、SvelteKit/Sapper或类似的东西。这些工具不仅简化了工具，加快了开发速度，而且还添加了许多复杂应用程序可能需要的插件，非常方便易用。如果我们想避免使用框架但需要精简脚本和样式，Vite将是首选工具。延伸阅读如果你对Vite的神奇之处感到好奇？让我们通过实际构建一个基于Vue3组件的表格编辑系统来亲身体验一下。纯前端表格控件SpreadJS支持Vue框架
