盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰(zhàn)略發(fā)布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
由于這幾個月使用了Vue3 + TS + Vite進行開發(fā)，并且是真的被Vite強力吸粉了！！！Vite最大的優(yōu)點就是：快！！！非常快！！！
說實話，使用Vite開發(fā)之后，我都有點不想回到以前Webpack的項目開發(fā)了，因為之前的項目啟動項目需要30s以上，修改代碼更新也需要2s以上，但是現(xiàn)在使用Vite，差不多啟動項目只需要1s，而修改代碼更新也是超級快！！！
那到底是為什么Vite可以做到這么快呢？官方給的解釋，真的很官方。。所以今天我想用比較通俗易懂的話來講講，希望大家能看一遍就懂。
咱們都知道，以前的瀏覽器是不支持ES module的，比如：
// index.jsimport { add } from './add.js'import { sub } from './sub.js'console.log(add(1, 2))console.log(sub(1, 2))// add.jsexport const add = (a, b) => a + b // sub.jsexport const sub = (a, b) => a - b 你覺得這樣的一段代碼，放到瀏覽器能直接運行嗎？答案是不行的哦。那怎么解決呢？這時候打包工具出場了，他將index.js、add.js、sub.js這三個文件打包在一個bundle.js文件里，然后在項目index.html中直接引入bundle.js，從而達到代碼效果。一些打包工具，都是這么做的，例如webpack、Rollup、Parcel
這個不用說，大家都懂：
Vite在打包的時候，將模塊分成兩個區(qū)域依賴和源碼：
咱們看下面兩張圖：
第一張圖，是以前的打包模式，就像之前舉的index.js、add.js、sub.js的例子，項目啟動時，需要先將所有文件打包成一個文件bundle.js，然后在html引入，這個多文件 -> bundle.js的過程是非常耗時間的。
第二張圖，是Vite的打包方式，剛剛說了，Vite是直接把轉換后的es module的JavaScript代碼，扔給支持es module的瀏覽器，讓瀏覽器自己去加載依賴，也就是把壓力丟給了瀏覽器，從而達到了項目啟動速度快的效果。
剛剛說了，項目啟動時，將模塊分成依賴和源碼，當你更新代碼時，依賴就不需要重新加載，只需要精準地找到是哪個源碼的文件更新了，更新相對應的文件就行了。這樣做使得更新速度非常快。
Vite 同時利用 HTTP 頭來加速整個頁面的重新加載（再次讓瀏覽器為我們做更多事情）：源碼模塊的請求會根據 304 Not Modified 進行協(xié)商緩存，而依賴模塊請求則會通過 Cache-Control: max-age=31536000,immutable 進行強緩存，因此一旦被緩存它們將不需要再次請求。
剛剛咱們說的都是開發(fā)環(huán)境，也說了，Vite在是直接把轉化后的es module的JavaScript，扔給瀏覽器，讓瀏覽器根據依賴關系，自己去加載依賴。
那有人就會說了，那放到生產環(huán)境時，是不是可以不打包，直接在開個Vite服務就行，反正瀏覽器會自己去根據依賴關系去自己加載依賴。答案是不行的，為啥呢：
所以Vite最后的打包是使用了Rollup。
本文鏈接：http://m.www897cc.com/showinfo-26-79148-0.htmlVite 為什么快呢？快在哪？說一下我自己的理解吧
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： .NET6中的await原理淺析
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號