今天我們要介紹的是Paul Melero，一個牛掰的web開發(fā)者，一個喜歡把自己會的內(nèi)容傳授給其他人的盆友。
你可知道他是 Testing Vue.js Components with Jest Spanish translation的作者，所以不要小瞧了他哦。
讓我們看下他給我們分享的小技巧!
我假設(shè)你已經(jīng)熟讀并背誦“code splitting” 和 “l(fā)azy loading”
讓我們看一下Webpack’s docs中的定義:
懶加載，后者是“按需加載”， 是一個非常好的優(yōu)化網(wǎng)站和App的方式。這個方法的本質(zhì)就是按照邏輯模塊切割代碼，當用戶請求這個模塊的時候呢再進行加載。這種方式的加載速度要高于直接在初始化的時候加載整個應(yīng)用，并且比完整加載所有模塊要輕量。因為有的模塊，甚至從來就沒有用到過。
這種特色應(yīng)該被我們使用的框架天然支持才對，因為已經(jīng)有人建議，甚至是在React ecosystem)中。
The meat:
任何時候我都會建議使用動態(tài)引入的方式來加載組件。這些組件都會通過webpack實現(xiàn)按需加載。
// 常規(guī)的import加載
import MyComponent from "~/components/MyComponent.js";
// import*函數(shù)*動態(tài)加載
const MyComponent = () => import("~/components/MyComponent.js");
釋義:
當使用webpack打包我們的應(yīng)用時，我們會用不同的方式去模塊化（ES Modules, CJS, AMD等等），如果我們選在ES6的模塊化方式（推薦用法），你會用到下面的語法：
import MyComponent from "~/components/MyComponent.js";
要知道，很多場景下我們都希望使用異步組件。正如Alex Jover在這篇文章中提到的：
- 導(dǎo)入組件
- Vue Router中，使用組件
- Vuex的模塊
讓我們看一下這個語法然后聚焦到import部分。
如果你正在用的Webpack （或者 Parcel!)，這個語法會在 編譯時進行轉(zhuǎn)換，并且這些工具會用Promise語法異步加載assets/modules/components。
你或許會疑惑為什么需要一個箭頭函數(shù)，正Axle解釋的我們需要把import函數(shù)包裹起來，只有當真正需要執(zhí)行的時候我們才調(diào)用它。
為了展示他們是如何懶加載的，我們準備了一個使用Nuxt.js的代碼庫，一共兩個頁面，并且都加載了組件A和組件B，但是他們的區(qū)別就是使用和不使用動態(tài)加載技術(shù)。
我們看到的現(xiàn)象是，當導(dǎo)航加載后，使用動態(tài)加載時webpack加載2個分割的文件。但是，使用常規(guī)的import加載的頁面組件(/without)，就會加載的文件比較大，因為它一次性加載了所有內(nèi)容。
Image showing network waterfall when navigating to both pages. And the differences between both techniques (with and without dynamic imports)
Yes, by using this technique, Webpack will create separate files (“chunks”) to load them when needed (lazily). Custom chunk naming can be done with Magic comments but that will be the subject of another article ??.
上圖展示了nuxt的編譯后的結(jié)果。我們可以看到使用動態(tài)的加載方式，就會為組件A和組件B打包成兩個不同的文件。
以上就是所有內(nèi)容
更多有關(guān)代碼分割技術(shù)的解釋請參考:
- De facto linked article by Anthony Gore: https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
- Google’s web fundamentals article by Addy Osmani and Jeremy Wagner about code splitting: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
- Webpack 文檔: https://webpack.js.org/guides/code-splitting/
*PS: 這個例子建議使用webpack的4.29.6，Nuxt的2.4.0和Vue的2.5.22版本。
Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!
