Parlez de votre compréhension de vite

Language 2023-05-21 19:07:20 views: null

1. qu'est-ce que vite

Vite est une nouvelle génération d'outils de construction front-end qui peuvent améliorer considérablement l'expérience de développement front-end. Il utilise le cumul pour empaqueter votre code, qui est prêt à l'emploi, et fournit également une API de plug-in riche, qui apporte un haut degré d'évolutivité. Peut construire vue, réagir et d'autres projets

2. Quels sont les avantages de vite par rapport au webpack (pourquoi choisir vite)

le service vite démarre plus vite

Lorsque Webpack est empaqueté, il doit d'abord saisir et créer l'intégralité de votre application avant de pouvoir la servir. Ainsi, pour les grands projets, cela prend généralement quelques minutes lorsque nous exécutons npm run serve, et même quelques secondes pour les mises à jour à chaud.

 Vite améliore le temps de démarrage du serveur de développement en séparant les modules de l'application en  deux catégories : les dépendances  et  le code source au début. Dépendance Utilisez esbuild pour pré-construire les dépendances. Le code source est constitué des composants métier écrits dans notre code. Vue, les fichiers .ts, etc., se présentent sous la forme d'esmodules. D'une part, les navigateurs peuvent analyser directement les esmodules. D'autre part d'autre part, nous pouvons importer et router dynamiquement La méthode de chargement paresseux ne charge les ressources de la page que lorsque la route saute vers la page correspondante.

image.png

image.png

La mise à jour à chaud du service vite est plus rapide

Dans Vite, HMR est exécuté sur l'ESM natif. Lors de l'édition d'un fichier, Vite n'a qu'à désactiver précisément la chaîne entre le module édité et sa limite HMR la plus proche [1] (la plupart du temps juste le module lui-même), ce qui rend HMR toujours rapide quelle que soit la taille de l'application.

Vite utilise également des en-têtes HTTP pour accélérer le rechargement de la page entière (laissant à nouveau le navigateur en faire plus pour nous) : les demandes de modules de code source seront mises en cache  304 Not Modified en fonction de la négociation, et les demandes de modules dépendants seront  Cache-Control: max-age=31536000,immutable fortement mises en cache via Ils ne le seront pas besoin d'être redemandé.

3. Quelles sont les fonctions de vite ?

analyse et construction des dépendances npm

image.png

image.png

image.png

image.png

Manuscrit

Vite 天然支持引入 .ts 文件。 请注意，Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。那怎么开启类型检查呢？

image.png

客户端类型 Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：

image.png

tsconfig.json中需要加入一下

image.png

或者官网提示可以这样做

image.png

css

  • 路径导入支持使用@import，eg： @import './base.css';
  • 支持CSS Modules用法可以参考

image.png

  • 支持css预处理器

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。 话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

image.png

另外，vite.config.ts中需要增加如下配置：

    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";' //引入全局scss样式
        }
      }
    }
复制代码

你还可以通过在文件扩展名前加上 .module 来结合使用 CSS modules 和预处理器，例如 style.module.scss。（react项目中这样用过）

  • 禁用 CSS 注入页面

image.png

静态资源处理

  • 引入静态资源的方式
import imgUrl from './img.png' 
document.getElementById('hero-img').src = imgUrl
复制代码

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

  • 常见的图像、媒体和字体文件类型被自动检测为资源。你可以使用 assetsInclude 选项 扩展内部列表。
  • 较小的资源体积小于 assetsInlineLimit 选项值 则会被内联为 base64 data URL。
  • 默认情况下，TypeScript 不会将静态资源导入视为有效的模块。要解决这个问题，需要添加 vite/client。(使用vue脚手架初始化项目，这些都会帮你配好的）
  • public目录

image.png

  • new URL(url, i​mport.meta.url)

i​mport.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href 
document.getElementById('hero-img').src = imgUrl
复制代码

这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) { 
    return new URL(`./dir/${name}.png`, import.meta.url).href 
 }
复制代码

示例：

<body>
  <img id="imgbox"></img>
  <script type="module">
      // 在原生方式直接这样引用不行呢，需要使用new URL 结合import.meta.url的方式
      // import imgUrl from './straw.jpg'
      // import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。
      // 注意：1.js的type类型需是module 2.返回的地址是绝对路径
      console.log('import.meta',import.meta)
      //new URL() 创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。
      // 如果url参数是相对 URL，则构造函数将使用url参数和可选的base参数作为基础。
      const url = new URL('./straw.jpg',import.meta.url).href
      document.getElementById('imgbox').src = url
      // document.getElementById('imgbox').src = imgUrl
  </script>
</body>
复制代码

4.vite中的环境变量

  • Vite 在一个特殊的 import.meta.env 对象上暴露环境变量

image.png

  • .env文件（如果改变了env文件的代码，需要重启服务后才会生效）

image.png

image.png

  • TypeScript 的智能提示

image.png

  • HTML 环境变量替换

image.png

  • 模式

image.png

image.png

5.vite项目中的一些实践

1.vite-plugin-checker可以配置检查ts,项目中发现并没有检查.vue文件

 第一种方式：dev": "vue-tsc --noEmit && vite",

第二种方式： （推荐，因为npm run dev ，vite线程不做类型检查，只做ts语法转译，相当于开启第二个线程做类型检查）

    checker({

        // eslint: {

        //   // for example, lint .ts and .tsx

        //   lintCommand: 'eslint "./src/\*\*/\*.{js,jsx,ts,tsx}"',

        // },

        typescript: true,

        vueTsc: true

      })

复制代码

2.npm run build (如果有ts问题，阻止打包成功，不生成dist文件）

"build": "vue-tsc --noEmit && vite build",

3.build打包优化

  - 压缩 vite-plugin-compression（需要通知后端和运维，前端已经压缩了，后端设置content-type:gzip,客户端收到后需要解压缩，也是需要时间的，所以不建议过多处理？）

   - 分包 这个构建工具好像自动做了（把一些不常动的包分割出来，比如loadsh,利用浏览器的缓存策略只更新变动的文件）

   - 动态加载，比如动态路由

   - cdn加速 vite-plugin-cdn-import

4.preview 预览生产包

blog.csdn.net/qq_40513881…

5.unplugin-auto-import 和unplugin-vue-components

unplugin-auto-import  自动导入vue中的api, 避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。

unplugin-vue-components 自动导入vue组件，比如element ui ,ant-design-vue

实际项目中使用 unplugin-vue-components会报错

[unplugin-vue-components] component Src(UsersbaoweifangDesktopcodeworkspacerisk.png

    Components({

        resolvers: [

          AntDesignVueResolver({

            // importStyle: 'less', // 一定要开启这个配置项

          }),

        ],

        directoryAsNamespace: true

      }),

解决directoryAsNamespace: true。加这个属性后实际项目也会有警告

Pasted Graphic 78.png

6.获取文件路径

process.cwd()， __dirname, __filename

Dans Node.js, process.cwd(), __dirnameet __filenamepeuvent être utilisés pour localiser un fichier ou un répertoire, ou dans certains cas, ils peuvent être utilisés pour générer un chemin de fichier.

process.cwd()Renvoie le chemin du répertoire de travail courant. Ce chemin est une chaîne qui correspond au répertoire de travail actuel dans le système d'exploitation à partir duquel le processus Node.js a été démarré.

__dirnameRenvoie le nom du répertoire du module courant. Ce chemin est une chaîne, qui représente le chemin absolu du répertoire où se trouve le module courant. Il n'inclut pas le nom de fichier du module actuel.

__filenameRenvoie le nom de fichier du module actuel, y compris le chemin. Le chemin est une chaîne représentant le chemin absolu du module courant. Il inclut le nom de fichier du module actuel.

Par exemple, les trois chemins obtenus lorsque npm run dev sont : /Users/baoweifang/Desktop/code/workspace/risk-mgr-uniportal/micro-vite /Users/baoweifang/Desktop/code/workspace/risk-mgr-uniportal / micro-vite /Users/baoweifang/Desktop/code/workspace/risk-mgr-uniportal/micro-vite/vite.config.ts

Je suppose que tu aimes

Origine juejin.im/post/7222855604405927994
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com