[Vue] 性能優化: 實現延遲載入和代碼拆分

Vue 性能優化：如何實現延遲載入和代碼拆分？
https://www.infoq.cn/article/9ihyy7HW00ij8suTh*zN

1.延遲載入 Vue 組件
通過Promise import來施行按需加載組件
例︰
const lazyComponent = () => import('Component.vue')

2.使用 vue-router 進行基於路由的代碼拆分
我們需要使用動態導入語法為每個路由創建單獨的包，不需要直接將元件導入到 route 物件中，只需要傳入一個動態導入函數。只有在解析給定的路由時，才會下載路由組件。
例︰
const routes = [
  { path: /foo', component: () => import('./RouteComponent.vue') }
]

3.Vue 生態系統中的代碼拆分
協力廠商捆綁通常被用在單獨 JS 檔包含 node_modules 模組的上下文中，雖然把所有東西放在一個地方並緩存它們可能很誘人，但這種方法也引入了我們將所有路由捆綁在一起時遇到的問題，會重複打包。我們只需要在 Webpack 配置中添加幾行代碼: splitChunksPlugin，就可以將公共依賴項分組到一個單獨的包中，並共用它們。


#Vue, import, vue-router, webpack, split chunks, 延遲載入, 代碼拆分, 性能優化