SharePoint Framework 在web部件中使用已存在的JavaScript庫 - 捆綁打包和外部引用

在建構SPFx用戶端web部件時，你可以使用公網已有的JavaScript庫來建構強大的解決方案。但是在使用的時候你需要考慮你引用的東西沒有影響SharePoint頁面的性能。

引用已存在的JavaScript庫的通常方式是以包的形式安裝到項目中。拿Angular舉例，首先在項目中安裝它的包：

npm install angular --save

接下來通過TypeScript使用Angular，需要安裝類型：

npm install @types/angular --save

最後，在你的web部件中引用Angular，使用import聲明：

import { Version } from '@microsoft/sp-core-library';

import {

BaseClientSideWebPart,

IPropertyPaneConfiguration,

PropertyPaneTextField

} from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './HelloWorld.module.scss';

import * as strings from 'helloWorldStrings';

import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';

import * as angular from 'angular';

export default class HelloWorldWebPart extends BaseClientSideWebPart {

public render(): void {

}

// omitted for brevity

SPFx使用基于開源的工具鍊進行編譯，如gulp和Webpack。在編譯SPFx項目時，這些編譯工具會在一個叫做bundling的程序中自動将所有引用的資源打包到一個單一的JavaScript檔案中。這種方式有很多優點。首先，所有web部件需要的資源都在一個單一的JavaScript檔案中可用。這簡化了web部件的部署步驟，不容易産生遺漏。由于你的web部件使用了不同的資源，以正确的順序逐個加載是很重要的。同時這種方式也對終端使用者有益。一般來說，下載下傳一個較大的單一檔案要比下載下傳好多小檔案要快，進而你的web部件也會在頁面上更快地完成加載。

然而這種方式也有一些不足。在編譯SPFx中已存在的JavaScript架構時，所有引用的腳本都被包含在生成的單一檔案中，以Angular為例，這個生成後的檔案有170KB。

如果你在項目中再添加一個也使用Angular的web部件，在編譯後你會發現有兩個170KB的檔案。這樣當你在頁面中同時添加這兩個web部件的時候，就會加載兩次同樣内容的較大的腳本檔案，這嚴重影響了性能。

一個更好的引用已存在的庫的實作方式是作為外部資源進行引用。這樣在web部件中就隻有一個腳本的URL就夠了，其實跟web頁面的編寫是一個意思，在頁面加載的時候會自動去加載指定URL的資源。

這種方式也不需要進行包的安裝，但是需要安裝類型：

接下來在config/config.json檔案中的externals屬性中加入一條：

"angular": {

"path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",

"globalName": "angular"

完整的檔案内容大緻如下所示：

{

"entries": [

],

"externals": {

},

"localizedResources": {

最後，在你的web部件中引用Angular就可以了，跟之前沒什麼差別：

再次編譯你的項目你會發現這次的大小隻有6KB。

如果你再添加一個web部件，那麼就會生成兩個大小為6KB的檔案。說到這裡大家可能會有疑問，這實際上就是大小變了而已，但是并沒改變加載檔案的數量。其實不是的，前一種方式是将要引用的庫一起打包到了JS檔案中，實際上相當于加載了兩次；而對于外部引用這種方式，外部的資源如Angular隻加載一次，并且得益于緩存機制，外部引用的資源很可能已經在使用者通路你的web部件時加載好了，這麼看确實是提高了性能。