Vite| 青训营笔记

好好吃饭好好睡觉
91 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第8天

一、前端工程的痛点

  • 模块化需求： 业界的模块标准包括ESM，CommonJS，AMD和CMD等，前端工程不仅需要落实这些模块规范，还需要保证模块的正常加载
  • 兼容浏览器： 由于浏览器所限，只要是高级语言或者语法（ts,jsx等），如果想要被浏览器正常识别运行，就需要被转换为浏览器能够识别的形式，这个就需要工具链层的支持
  • 开发效率： 项目的冷启动/二次启动时间，热更新时间都可能严重影响开发效率，尤其是项目越来越庞大的时候

二、 为什么选择vite

  • Vite实际上是一个面向现代浏览器，基于ECMA标准的ES module 实现的一个更轻更快的Web应用开发工具

  • 如上述痛点三， 传统的构建工具普遍的特点就是太慢了，Vite能够将项目的启动性能提升一个量级

    • 如Webpack启动需要花费比较多时间的原因：

      • 项目冷启动时必须递归打包整个项目的依赖树
      • JavaScript语言本身的性能限制

    • Vite如何解决：

      • 在开发阶段基于ESM的支持提供了no-bundle服务
      • 借助ESbuild超快的编译速度来做第三方库构建TS/JSX语法编译
      • 只需要从入口文件出发，在遇到对应的import语句时，将对应的模块加载到浏览器中就可以了(按需加载)

  • Vite内置了对ts,jsx,sass等高级语法的支持，也能够加载各种各样的静态资源

  • Vite基于成熟的打包工具Rollup实现生产环境打包，同时配合 Terser, Babel等工具链

三、快速上手

使用方法：

pnpm create vite

初始化后的文件目录

. ├── index.html 
  ├── package.json
  ├── pnpm-lock.yaml
  ├── src 
  │ ├── App.css
  │ ├── App.tsx
  │ ├── favicon.svg
  │ ├── index.css
  │ ├── logo.svg
  │ ├── main.tsx
  │ └── vite-env.d.ts
  ├── tsconfig.json
  └── vite.config.ts
  • index.html文件默认作为入口文件
    • 使用type="module"--允许执行导入导出操作 export，import
    • 在Vite项目中，一个import语句相当于一个HTTP请求，Vite Dev Server 会读取本地文件，返回浏览器可以解析的代码(这个就是上述我们提到的按需加载，而不是先整体打包再加载，所以启动速度比较快)
    • src指向了'/src/main.ts --请求了http://localhost:3000/src/main.ts (默认端口为3000)
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
avatar
文章
阅读
粉丝