一、默認的打包過程：

• 默認情況下，在構建整個組件樹的過程中，因為組件和組件之間是通過模塊化直接依賴的，那么webpack在打包時就會將組件模塊打包到一起（比如一個app.js文件中）；
  

• 這個時候隨著項目的不斷龐大，app.js文件的內容過大，會造成首屏的渲染速度變慢；

打包時，代碼的分包：

• 所以，對于一些不需要立即使用的組件，我們可以單獨對它們進行拆分，拆分成一些小的代碼塊chunk.js；
• 這些chunk.js會在需要時從服務器加載下來，并且運行代碼，顯示對應的內容；
  那么webpack中如何可以對代碼進行分包呢？
  

二、Vue中實現異步組件

https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent

如果我們的項目過大了，對于某些組件我們希望通過異步的方式來進行加載（目的是可以對其進行分包處理），那么Vue中給我們提供了一個函數：defineAsyncComponent。

defineAsyncComponent接受兩種類型的參數：

• 類型一：工廠函數，該工廠函數需要返回一個Promise對象；
• 類型二：接受一個對象類型，對異步函數進行配置；

工廠函數類型一的寫法：

工廠函數類型二的寫法：

三、異步組件和Suspense結合使用

注意：目前（2021-06-08）Suspense顯示的是一個實驗性的特性，API隨時可能會修改。

Suspense是一個內置的全局組件，該組件有兩個插槽：

• default：如果default可以顯示，那么顯示default的內容；
• fallback：如果default無法顯示，那么會顯示fallback插槽的內容；
  

四、$refs的使用

某些情況下，我們在組件中想要直接獲取到元素對象或者子組件實例：

• 在Vue開發中我們是不推薦進行DOM操作的；
• 這個時候，我們可以給元素或者組件綁定一個ref的attribute屬性；
  

組件實例有一個$refs屬性：

• 它一個對象Object，持有注冊過 ref attribute 的所有 DOM 元素和組件實例。
  
  

五、$parent和$root

我們可以通過$parent來訪問父元素。

我們也可以通過$root來實現，因為App是我們的根組件；

注意：在Vue3中已經移除了$children的屬性，所以不可以使用了

總結

以上是生活随笔為你收集整理的Webpack的代码分包Vue3中定义异步组件分包refs的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。