性德国高清xxxxx妞,日韩在线中文字幕,欧美亚洲不卡

10分鐘了解一下最近很火的vue打包工具Vite

admin

2024年4月3日 10:18 本文熱度 735

Vite 是 vue的作者尤雨溪開發的打包工具，目前亮點是本地開發時熱加載編譯極快，在大型項目中體驗較好。

貼一下作者微博原話：

Vite，一個基于瀏覽器原生 ES imports 的開發服務器。利用瀏覽器去解析 imports，在服務器端按需編譯返回，完全跳過了打包這個概念，服務器隨起隨用。同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產環境則可以把同一份代碼用 rollup 打包。雖然現在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

從上面可以看出：

Vite 主要對應的場景是開發模式，跳過打包按需加載，因此熱更新的速度非常快；
在大型項目上可以有效提高本地開發編譯打包的速度，解決 “改一行代碼等半天” 問題；
瀏覽器解析 imports，利用了 type=“module” 功能，然后攔截瀏覽器發出的 ES imports 請求并做相應處理；
生產模式是用 rollup 打包，這里后續應該會做優化；

一、現代瀏覽器的模塊功能

將script標簽的type屬性設置為module，那么在js中就可以使用模塊功能(import '**.js')，es6兼容性為IE11及以下不支持，從 Vue3 的 proxy 和 Vite 的模塊，可以看出尤大是徹底放棄 IE 了。

二、攔截http請求

針對不同類型的文件做不同的處理

js文件用 es-module-lexer 來對 js 進行的語法分析獲取 imports 數組（依賴分析），然后將import語法替換為請求對應的js文件。

原代碼：

轉換后：

2. vue文件

vue單文件組件包含的三個部分 template、script、style, Vite 會將單文件組件分成三個部分分別請求，以及做相應處理。

2.1 template

Vite 將 template 編譯成 render 函數后返回。

2.2 script

分析 js 中的 import 依賴，重新發起請求。

2.3 style

將 style 編譯成 css 插入head中。原本的 App.vue 文件是：

<template>
    <h1>Hello Vite + Vue 3!</h1>
    <p>Edit ./App.vue to test hot module replacement (HMR).</p>
    <p><span>Count is: {{ count }}</span> <button @click="count++">increment</button></p>
</template>
<script>
    export default { data: () => ({ count: 0 }) };
</script>
<style scoped>
    h1 {
        color: #4fc08d;
    }
    h1,
    p {
        font-family: Arial, Helvetica, sans-serif;
    }
</style>