Vue路由懶加載

對於SPA單頁應用，當打包構建時，JavaScript包會變得非常大，影響頁面加載速度，將不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這就是路由的懶加載。

實現方式

Vue異步組件

Vue允許以一個工廠函數的方式定義你的組件，這個工廠函數會異步解析你的組件定義。Vue只有在這個組件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染。

Vue.component("async-example", function (resolve, reject) { setTimeout(function() { // 向 `resolve` 回調傳遞組件定義 resolve({ template: "<div>I am async!</div>" }) }, 1000) })

這個工廠函數會收到一個resolve回調，這個回調函數會在你從服務器得到組件定義的時候被調用，當然也可以調用reject(reason)來表示加載失敗，此處的setTimeout僅是用來演示異步傳遞組件定義用。將異步組件和webpack的code-splitting功能一起配合使用可以達到懶加載組件的效果。

Vue.component("async-webpack-example", function (resolve) { // 這個特殊的 `require` 語法將會告訴 webpack // 自動將你的構建代碼切割成多個包，這些包 // 會通過 Ajax 請求加載 require(["./my-async-component"], resolve) })

也可以在工廠函數中返回一個Promise，把webpack 2和ES2015語法加在一起。

Vue.component(
  "async-webpack-example", // 這個動態導入會返回一個 `Promise` 對象。 () => import("./my-async-component") )

事實上我們在Vue-Router的配置上可以直接結合Vue的異步組件和Webpack的代碼分割功能可以實現路由組件的懶加載，打包后每一個組件生成一個js文件。

{
  path: "/example", name: "example", //打包后，每個組件單獨生成一個chunk文件 component: reslove => require(["@/views/example.vue"], resolve) }

動態import

在Webpack2中，可以使用動態import語法來定義代碼分塊點split point，官方也是推薦使用這種方法，如果使用的是Bable，需要添加syntax-dynamic-import插件，才能使Babel可以正確的解析語法。

//默認將每個組件，單獨打包成一個js文件 const example = () => import("@/views/example.vue")

有時我們想把某個路由下的所有組件都打包在同一個異步塊chunk中，需要使用命名chunk一個特殊的注釋語法來提供chunk name，需要webpack > 2.4。

const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue"); const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");

事實上我們在Vue-Router的配置上可以直接定義懶加載。

{
  path: "/example", name: "example", //打包后，每個組件單獨生成一個chunk文件 component: () => import("@/views/example.vue") }

webpack提供的require.ensure

使用webpack的require.ensure，也可以實現按需加載，同樣多個路由指定相同的chunkName也會合並打包成一個js文件。

// require.ensure(dependencies: String[], callback: function(require), chunkName: String)
{
    path: "/example1",
    name: "example1",
    component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
},
{
    path: "/example2",
    name: "example2",
    component: resolve => require.ensure([], () => resolve(require("@/views/example2.vue")), "Example")
}

SPA單頁應用的優缺點

`Single Page Web Application`是一種特殊的`Web`應用，其所有的活動局限於一個`Web`頁面中，僅在該`Web`頁面初始化時加載相應的`HTML`、`JavaScript`、`CSS`文件，一旦頁面加載完成，`SPA`不會進行頁面的重新加載或跳轉，而是利用`JavaScript`動態的變換`HTML`，默認`Hash`模式是采用錨點實現路由以及元素組件的顯示與隱藏實現交互，簡單來說`SPA`應用只有一個頁面，通常多頁面應用會有多個頁面不斷跳轉，而單頁面應用始終在一個頁面中，默認`Hash`模式是通過錨點實現路由以及控制組件的顯示與隱藏來實現類似於頁面跳轉的交互。

優點

良好的交互體驗，頁面首次加載完成后內容的改變不需要重新加載整個頁面，具有更快的響應速度，具有桌面應用的即時性、網站的可移植性和可訪問性。
良好的前后端工作分離模式，單頁應用可以和RESTful架構一起使用，通過RESTAPI提供接口數據，有助於分離客戶端和服務器端工作與API通用化。
減輕服務端壓力，服務端不需要處理頁面模板的邏輯與拼接，除首次加載頁面外只需要提供數據信息即可，把計算盡量放在客戶端，單頁應用能提高單位服務器的負載量。
可維護性高，通常采用組件化與模塊化開發，代碼復用程度高，相對來說可維護性高。

缺點

不利於SEO，由於是采用前端渲染的方式，搜索引擎不會去解析Js從而只能夠抓取首頁未渲染的模板，如果需要單頁面應用有更好的SEO，那么通常需要使用SSR服務端渲染，搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面，但是由於是服務端進行渲染，那么會對服務器造成一定壓力，SSR服務端渲染屬CPU密集型，當然如果只是需要SEO少數幾個頁面，可以采用預渲染的方式。
首次加載速度慢，SPA單頁應用通常首次加載頁面時就會將相應的HTML、JavaScript、CSS文件全部加載，通常可以通過采取緩存措施以及懶加載即按需加載組件的方式來優化。