Vite项目实战

从这里开始
96 阅读4分钟

vite 在企业中的最佳实践-基础

  • typescript 文件的支持

  • vue 文件的支持编译，需要使用 vue-compiler 编译成 render 函数

  • less/scss/stylus 文件的支持

  • 语法降级，老浏览器的支持，es 新语法转换成老浏览器支持的语法

  • 体积优化

    1. uglifyjs 将我们的代码进行压缩，将代码压缩为体积更小的文件
    2. app.tsx 文件，通过 tsc 转化为 app.js 在经过 reactCompiler 转化为 React.createElement less/sass/
    3. 我们只需要关系我们写的代码就好了，只要监测到文件变化，就重新编译重新得到结果。这些工作就成为"构建工具"

  • 构建工具的支持

    1. 模块化支持
      • 不能解析模块，因为模块路径的文件, 浏览器不清楚需要去 node_modules 中查找，需要构建工具支持才能识别 node_modules 路径
      • 多种模块化支持 commonjs 规范 require 等
    2. 处理代码兼容性
      • ts scss/less babel语法降级 vue/react文件
      • 集成代码兼容性工具, 处理代码兼容性
    3. 提高项目性能
      • 打包: 将我们写的浏览器不认识的代码，交给构建工具进行编译，编译的过程就要叫做打包,打包成浏览器认识的文件.
        • 压缩文件
        • 代码分割
        • 优化开发体验(webpack 到 vite 全链路优化升级，和培训), 更新的过程叫做热更新。
        • 开发服务器，解决跨域的问题。vue-cli create-react-app

  • vite 相对于 webpack 的有什么优势

    • webpack 从根本上依赖编译的结果。webpack 的实现原理导致的问题。webpack 支持多种模块化 
      •  const lodash = require("lodash")
 import vue from "vue"
  => webpack内部构建自己内部的webpack_require实现
 const lodash = webpack_require("lodash")
 const vue  = webpack_require("vue")
      • 因为 webpack 支持多种模块化，它一开始就需要把所有的文件读取完. 需要更多的时间去构建和编译分析
        • webpack 和 vite 做的工作不同，webpack 更多关注代码的兼容性，vite 更关注浏览器的开发体验。
          • webpack 需要全部读取文件和解析后进行加载执行， vite 是按需加载的(不需要全部解析文件)

  • pnpm create vite

    • create-vite 创建的项目, create-vite 内置了 vite
    • 预设: vite 和 vue

  • 浏览器的模块化为什么不能支持 node_modules 呢?

    • 不能解析模块，因为模块路径的文件, 浏览器不清楚需要去 node_modules 中查找，需要构建工具支持才能识别
    • node_modules 中第三方包包含的大量的文件, 如果浏览器能加载 node_modules 模块，那么浏览器就会发送大量的请求会有资源的依赖。

重点

Vite 是怎样查找非绝对路径的模块的?

  • Vite 采用路径补全的方式/node_modules/.vite/deps,

  • 生产环境会全部借给 rollup 进行打包。

  • 缓存 (依赖预构建): 首先 vite 会找到对应的依赖，然后调用 esbuild 对其他包的的规范转换为 esmodule 规范，存储在node_module/.vite/deps文件中。这个过程就叫做依赖预构建。

    • 解决了三个问题
      1. 不同的第三方包会有不同的导出格式(这是 vite 无法约束的事情)
      2. 一次性路径的处理上可以直接使用node_module/.vite/deps,方便路径重写冲突解决,在进行资源的统一集成。
      3. 解决了网络多包传输的性能问题, 这个原因也是 esm 不能支持 node_modules 文件的原因
      • lodash引入其他包需要网络请求加载,就会发送大量的请求，造成资源的浪费。vite 解决问题的方式就是依赖预构建
      • 有了依赖预构建之后 vite 只生成一个多几个模块，解决第三方依赖的问题。

  • Vite 开发体验

    1. typescript 的语法提示 defineConfig 中传递参数必须引入 userConfig 类型

    2. 添加注 vite 注解

      1. 环境变量
      • webpack 的分文件处理:
        • webpack.base.config
        • webpack.dev.config
        • webpack.prod.config
      • vite 分文件处理方式
        • 策略模式分打包环境

  • vite 的环境变量

    • 环境变量: 会随着构建环境变化的变量称为环境变量

    • 项目环境区分

      • 生产环境
      • 测试环境
      • 开发环境
      • 预发布环境

    • vite 内部自动集成了 dotenv, dotenv 可以获取到当前工作目录下的.env 的文件

    • process.cwd(): 返回当前环境的工作目录 (node 的启动目录)

    • loadEnv 做了哪几件事情. 获取当前路径的环境变量

      1. 默认读取.env 文件，进行解析成一个对象
      2. 读取 mode 的环境变量和.env.{mode}进行拼接, 通过 envDir 读取文件中变量, 返回一个对象
      3. 如果对象中的 key 相同，会覆盖.env 中的变量的值
         const envLocal = 全局变量
   const developmentLocal = 开发环境变量
   const lastLocal = {..envLocal, ..developmentLocal}
      1. mode 的值，可以在脚本启动的时候可以通过 vite --mode dev 的方式进行更改
      2. 客户端在访问环境变量的时候 vite 为了安全，区分敏感信息。需要 vite 中使用import.meta.env对象上进行获取，同时需要配置envPrefix前缀, vite 中的默认前置是VITE_, 可以通过envPrefix进行修改
avatar
文章
阅读
粉丝