使用延遲載入提升SPA效能

Vue AngularJS Webpack · 發表 2018-09-14 19:32:00

摘要：如果您是Web開發人員，很可能您正在使用Webpack作為模組捆綁器，並且可能您不知道延遲載入是什麼。什麼是延遲載入？你也許會想：“延遲並不是快，可能正好相反”，你在語義上沒有錯，但還有另一種方法，讓我們看看Webpack的延遲載入定義是什麼： lazy或“按需...

如果您是Web開發人員，很可能您正在使用Webpack作為模組捆綁器，並且可能您不知道延遲載入是什麼。

什麼是延遲載入？

你也許會想：“延遲並不是快，可能正好相反”，你在語義上沒有錯，但還有另一種方法，讓我們看看Webpack的延遲載入定義是什麼：

lazy或“按需”載入是優化網站或應用程式的好方法，這種做法主要涉及在邏輯斷點處拆分程式碼，然後在使用者完成需要或將需要新程式碼塊的操作後再去載入它。

換句話說，你可以任何你想要的方式（即元件）拆分程式碼，瀏覽器只會載入應用程式執行所需的程式碼。聽起來真棒！

我為什麼需要這個？

這是一個簡單的問題。提升效能！使用延遲載入時，只會載入所需的程式碼，初始載入速度會更快（因為只加載了更少的程式碼），並且整體速度將更快地按需載入。

我也喜歡在應用延遲載入時如何捆綁程式碼，沒有它，你可能會有一個HTML檔案，一個CSS和一個巨大的JS。

我怎麼能做到這一點？

首先，你需要Webpack以及Babel和一些外掛。

npm i -D dynamic-import-webpack syntax-dynamic-import

現在我們安裝了所有東西，我們需要將它們新增到我們的Babel配置檔案.babelrc中。


{
"plugins": [
...
"dynamic-import-webpack",
"syntax-dynamic-import"
],
"presets": [
["env", {
"targets": [
"last 2 versions", "safari >= 7", "not ie < 9"
]
}]
]
}

當然，這只是執行應用程式所需的Babel配置，可隨意新增適合您需要的外掛/preset。

你可能認為你需要以不同的方式進行編碼，事實是你並不需要這樣做。唯一會改變的是匯入程式碼的方式。

給我看一些程式碼！

React和Vue是令人驚歎的框架，無論你使用哪一個，都有一種簡單的方法來決定如何分割共享程式碼。元件！基於元件的程式碼拆分是使用這些框架的最佳策略。

使用react-loadable響應非同步路由:


import React from 'react';
// We can use react-loadable to cover the most possibles outcomes of the code splitting
import Loadable from 'react-loadable';

// My Loader component
import Loader from '@components/Loader';

// Create the async route
const AsyncRoute = Loadable({
loader: () => import('./index'),
loading() {
return <Loader />;
}
});

// This is the component the React Router will use
const MyRoute = props => <AsyncRoute {...props} />;

export default MyRoute;

在上面的程式碼中，我們使用react-loadable實現非同步路由工作（你也可以將它用於非必要路由的元件），並新增一些功能，比如在請求元件時顯示載入器和超時管理。

Vue非同步元件：


import Vue from 'vue'

import Navbar from '../../components/Navbar'

const AsyncComponent = () => import('../../components/AsyncComponent')

const vm = new Vue({
el: '#app',
// ... all attributes necessary for your instance
components: { Navbar, AsyncComponent }
})

對於Vue，可以僅使用動態匯入功能請求元件，並將其註冊到例項，如上所示。這僅適用於元件，但對於路由是相同的，只需將元件新增為路由器配置中的路由元件即可。

無論如何，我們不能忘記Angular，因為我們也可以只更改配置：


import { RouterModule, Routes, PreloadAllModules } from @angular/router;

// You can say to Angular the route is async with the hash at the end of the import
export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
{ path: 'settings', loadChildren: '../settings/settings.module#SettingsModule' },
{ path: 'reports', loadChildren: '../reports/reports.module#ReportsModule' }
];

@NgModule({
// ...
imports: [
RouteModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
],
// ...
})
export class AppModule {}

在執行我們專案的構建之後，我們現在可以看到建立了不同的檔案，如果您沒有使用延遲載入，則之前這些檔案不會存在。

現在，我們已經將應用程式的非同步路由與主要程式碼塊分開，我們現在以我們想要的方式執行我們的程式碼塊，那麼這將如何發揮作用？在我們載入檢視時，可以在瀏覽器控制檯中檢查網路檢視，能夠發現延遲載入的元件。

在這裡展示瞭如何分離非同步路由和元件，這樣，可以最大限度地減少應用程式的大小，並通過此程式碼拆分技術帶來很多效能改進。

使用延遲載入提升SPA效能

您可能也會喜歡…