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

2021-07-16 23:22:35

博客地址：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部件运行时加载了。

码农公寓

相关文章