SharePoint Framework 在web部件中使用第三方樣式 - 從外部URL引用第三方樣式

Justin-Liu發表於2018-02-12
FrameworkWeb

部落格地址：http://blog.csdn.net/FoxDave
本篇講述如何在web部件中從外部URL引用第三方樣式庫。
在SPFx專案中引用第三方庫的另一種方式就是從URL引用它們，如CDN或私有管理路徑。這種方式最大的好處是我們將從公共位置載入常用的庫，有可能客戶端的使用者已經將該庫下載到了本地電腦中。這種情況下SPFx將會重用快取中的庫，使你的web部件載入得更快。
即便你不能使用公共CDN來載入庫，從提高效能的角度看也是一次很好的實踐。指向URL可以使使用者只下載一次指令碼，之後在整個網站進行快取重用，顯著提升了載入頁面的速度和使用者體驗。
在從公共URL載入第三方庫時，要注意使用上的風險。因為承載它們的地址不是由你進行管理的，所以不能確保它們的內容絕對安全。SPFx載入的指令碼在當前使用者的上下文執行，具有當前使用者的許可權。並且，如果承載指令碼的地址不能訪問了，你的web部件就無法工作了。
安裝庫的型別
當你從URL引用第三方庫時，你不需要將他們以包的形式在你的專案中進行安裝。但是如果你想要在開發過程中進行型別安全檢查，你需要安裝它們的TypeScript型別。
假設你建立了一個空專案，用命令npm install @types/jquery –save(注意是兩個短橫線)安裝TypeScript的jQuery型別。
指定庫的URL
從一個URL載入第三方庫，你需要在專案的配置檔案中指定該庫URL的地址。開啟檔案./config/config.json，在externals部分新增jQuery相關的程式碼，新增完的程式碼所示：

{
  //...
  "externals": {
    //...
    "jquery": "https://code.jquery.com/jquery-3.1.1.min.js",
    "jquery-ui": "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    //...
  }
  //...
}

在web部件中從URL引用庫
在SPFx專案中指定了載入jQuery和jQuery UI的URL後，下一步是在專案中進行引用，開啟檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在檔案的頂部import宣告的下面，新增如下程式碼：

import * as $ from 'jquery';
require('jquery-ui');

在打包時，它們會被標記為外部資源，因此不會包含在包中。執行命令gulp serve來啟動專案。在彈出的工作臺頁面中，新增web部件到畫板中，開啟瀏覽器的debug tool並轉到network標籤頁，重新整理頁面。我們可以看到jQuery載入的地址：

細心的你會發現，上圖的摺疊樣式沒有顯示出來，從請求檢視器中我們可以看到只載入了jQuery UI的指令碼，但是並沒有載入CSS樣式。
在web部件中引用第三方CSS樣式表
前面提到的config.json檔案只支援新增外部的指令碼檔案，從外部引用樣式檔案跟它不同，我們需要使用SPComponentLoader。
使用SPComponentLoader從URL載入樣式
開啟檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在頂部import宣告的下面，新增如下程式碼：

import { SPComponentLoader } from '@microsoft/sp-loader';

然後重寫onInit()方法：

export default class JQueryAccordionWebPart extends BaseClientSideWebPart<IJQueryAccordionWebPartProps> {
  protected onInit(): Promise<void> {
    SPComponentLoader.loadCss('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css');
    return super.onInit();
  }

  // ...
}

在web部件在頁面例項化之後，它會從指定的URL載入jQuery UI的CSS。
再次檢視頁面，可以看到樣式出來了。

分析web部件包的內容
在編譯完專案之後，在瀏覽器中開啟檔案./temp/stats/js-thirdpartycss.stats.html，可以看到包明顯小了很多，變成了7KB(之前是300KB)，並且jQuery和jQuery UI並不在圖表中顯示了，因為它們是在web部件執行時載入了。

相關文章