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

博客地址: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加载的地址:
SharePoint Framework 在web部件中使用第三方样式 - 从外部URL引用第三方样式

细心的你会发现,上图的折叠样式没有显示出来,从请求查看器中我们可以看到只加载了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。
再次查看页面,可以看到样式出来了。
SharePoint Framework 在web部件中使用第三方样式 - 从外部URL引用第三方样式

分析web部件包的内容
在编译完项目之后,在浏览器中打开文件./temp/stats/js-thirdpartycss.stats.html,可以看到包明显小了很多,变成了7KB(之前是300KB),并且jQuery和jQuery UI并不在图表中显示了,因为它们是在web部件运行时加载了。

上一篇:SA542GrD美标容器板化学成分及力学性能分析


下一篇:最大化地使用现代化列表和库