1. vue和react為什麼運行時和編譯時
運行時與編譯時是前端工程師常常聽到的兩個詞。
比如 Vue 運行時、Angular 運行時、React 運行時……
又比如 svelte 框架，總聽到他的宣傳說的是「0 運行時」，所以他的工作其實就是在「編譯時」了。
這兩個詞到底是什麼意思呢？
2. vue生命周期總共有幾個階段
vue生命周期分為8個階段，即分別是創建前、創建後、載入前、載入後、更新前、更新後、銷毀前、銷毀後。VUE是iOS和Android平台上的一款Vlog社區與編輯工具，允許用戶通過簡單的操作實現Vlog的拍攝、剪輯、細調、和發布，記錄與分享生活，還可以在社區直接瀏覽他人發布的Vlog，與Vloggers互動。隨著手機攝像頭的發展，越來越多的人開始使用手機拍照和攝像。VUE軟體通過點按改變視頻的分鏡數實現簡易的剪輯效果，而剪輯能夠讓視頻傳達更多的信息。同時，該軟體中有12款濾鏡供用戶選擇，切換至前置攝像頭會出現自然的自拍美顏功能。VUE支持40款手繪貼紙，還可以編輯貼紙的出現時間。
3. Vue.js生命周期的詳細介紹
總共分為8個階段，分別為beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroyed、destroyed.
beforeCreate:在實例初始化之後，數據觀測者(data observer)和event/watcher事件配置之前調用。
在此階段無法通過vm訪問到data中的數據，methods中的方法。
created:在實例創建完成後立即調用。在這一步，實例已完成以下的配置：數據觀測者，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，Sel屬性目前不可見。
在此階段可以通過vm訪問到data中的數據，methods中的配置的方法。
beforeMount:在掛載開始之前調用，相關的render函數首次調用。
在此階段1.頁面呈現的是未經Vue編譯的DOM結構。2.所以對DOM的操作，最終都不奏效。
mounted: el被新創建的vm.Sel替換，並且在掛載到實例上之後再調用該鉤子.如果root實例掛載了一個文檔內元素，當調用mounted時vm.el也在文檔內。
beforeDestroy：在實例銷毀之前調用。在這一步，實例仍然完全可用。
beforeUpdate:在數據更新時調用，發生在虛擬DOM重新渲染和打補丁之前。updated:由於數據更改導致的虛擬DOM重新渲染和打補丁，在這之後會調用該鉤子。
在此階段數據的更新，但是頁面是舊的，無法操作新的DOM
updated階段：頁面是新的，一般在這里操作新DOM
destroyed:在Vue.js實例銷毀後調用。調用後，Vue.js實例指示的所有東西都會解除綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
4. vue2項目編譯webpack耗時統計
vue編譯命令 npm run build ，其實際使用的命令是 vue-cli-service build ，路徑是 node_moles\@vue\cli-service\lib\commands\build\index.js
speed-measure-webpack-plugin 每一項耗時都有精確統計，搭配使用 webpack-bundle-analyzer 打包後的各個模塊文件大小，直觀明了，根據具體項目再去進行優化。
5. 使用create-vue過程中遇到的一些問題
例如沒有引入的組件會報錯： __If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. __
所以要關注瀏覽器的警告， 不能忽略，有時候出錯了， 編譯也不報錯，排查很難受
解決方案： 將node版本升級到12及以上； 我用了12.16.2之後，啟動成功
筆者誤將vue-> Vue了，然後編譯器報了個Two output files share the same path but have different contents； 說打包路徑不能一直，搞得一臉懵；
最後通過對比發現，Pre-bundling dependencies的結果裡面多了個Vue導致的😄；很難受
最後，vite編譯的確實很快，不到6秒就能編譯成功，風一般的速度； 不過在使用的時候要注意各種坑，希望vite官方，能將錯誤拋出來，而不是報警告。
感謝vite大佬為我們提供了這么快的編譯工具！！！
6. vue編譯打包速度優化
1、首先在config文件夾下配置webpack.dll.config.js(內容如下)，要打包的模塊的數組可以將一些較大的依賴放進vendor中
2、在package.json的scripts加上
3、運行npm run dll就可以生成vendor-manifest.json和vendor.dll.js
4、然後在index.html中引入vendor.dll.js
然後就可以正常的進行編譯打包，會發現將更多的依賴放到vendor，打包速度越快
優化前
優化後
大概平均可以節省三分之一的時間。參考 webpack中文網