gulp serve
应使用标准的 jQuery UI 主题正确显示可折叠项并设置其样式。
分析生成的 Web 部件捆绑包的内容
使用第三方库及其资源的最简单方法是,将它们添加到生成的 Web 部件捆绑包中。 若使用这种方法,Webpack 会自动解析不同库之间的全部依赖关系,并确保所有脚本以正确顺序加载。 这种方法的缺点是,引用的所有资源必须与各个 Web 部件分开加载。 因此,如果项目中有多个 Web 部件并且全都使用 jQuery UI,那么各个 Web 部件都会加载自己的 jQuery UI 副本,这就减慢了页面的加载速度。
若要了解库对生成的 Web 部件捆绑包大小产生的影响,请在捆绑项目后,在 Web 浏览器中打开 ./temp/stats/js-thirdpartycss.stats.html 文件。 例如,将鼠标悬停在图表之上,你会看到,Web 部件引用的 jQuery UI CSS 文件占 Web 部件捆绑包总大小的 6% 还多。
如图表下面的声明所述,大小表示捆绑包的调试版大小。 捆绑包的发行版大小明显减小。 不过,最好还是了解 Web 部件捆绑包的不同组成部分及其相较于捆绑包中其他元素的相对大小。
方法 2:通过 URL 加载第三方库
在 SharePoint 框架中引用第三方库的另一种方法是,通过 URL(如公用 CDN 或私有管理位置)引用库。 最大的好处是,如果你要从公共场所加载常用库,用户可能已经在其计算机上下载了特定的库。 在这种情况下,SharePoint 框架会重复使用缓存的库,从而可以加快 Web 部件的加载速度。
即使你无法使用公用 CDN 从中央位置加载库,但从性能的角度来看,这也是很好的做法。 指向 URL 后,用户只需下载一次脚本,即可在整个门户中重复使用,大大加快了页面加载速度,并显著提升了用户体验。
通过公用 URL 加载第三方库时,请注意使用这些库时存在的风险。 由于你不管理任何特定脚本的托管位置,因此无法确定其内容。 SharePoint 框架加载的脚本在当前用户的上下文中运行,可以完成用户可执行的所有操作。 此外,如果托管位置处于脱机状态,Web 部件就无法运行。
添加已使用库的类型定义
通过 URL 引用第三方库时,无需以程序包的形式将库安装在项目中。 如果你希望在开发期间进行类型安全性检查,必须安装适用于库的 TypeScript 类型定义。
假设你是从本文前面创建的空项目入手,运行以下命令,安装适用于 jQuery 的 TypeScript 类型定义:
npm install @types/jquery --save-dev
指定库的 URL
要通过 URL 加载第三方库,必须在项目的配置中指定库所在的 URL。 在代码编辑器中,打开 ./config/config.json 文件。 在 externals
部分中,添加以下 JSON:
//...
"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 引用库
至此,已指定 SharePoint 框架应用来加载 jQuery 和 jQuery UI 的 URL,下一步是在项目中引用它们。
在代码编辑器中,打开 ./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts 文件。 在文件顶部,就在最后一个 import
语句的正下方,添加对 jQuery 和 jQuery UI 的以下引用:
import * as $ from 'jquery';
require('jquery-ui');
与在你的项目中安装库为程序包时你引用两个库的方式类比,通过 URL 引用库的方式非常相似。 由于 jQuery 安装了自己的 TypeScript 类型定义,因此可使用 import
语句引用它。 对于 jQuery UI,只需在页面上加载脚本。
由于你已在项目配置中将 jquery 和 jquery ui 注册为外部资源,因此在引用其中任一库时,SharePoint 框架会使用指定的 URL 在运行时加载库。 捆绑项目时,这些资源会被标记为外部资源,因此不会包含在捆绑包中。
要注意的一个区别是,以前你指定的是从 jQuery UI 程序包加载可折叠项,而现在你是从包含所有 jQuery UI 组件的 CDN 引用 jQuery UI。
运行以下命令,确认项目是否正在生成:
gulp serve
将 Web 部件添加到画布后,你应该会看到可折叠项能够正常运行。
在 Web 浏览器中,打开开发者工具,切换到显示网络请求的选项卡,然后重新加载页面。 你应用会看到 jQuery 和 jQuery UI 是如何从 CDN 加载的。
至此,你只引用了 jQuery UI 脚本,这就是为什么可折叠项不含样式的原因所在。 接下来,添加缺少的 CSS 样式表,为可折叠项设置样式。
在 Web 部件中通过 URL 引用第三方 CSS 样式表
通过 URL 添加对第三方 CSS 样式表的引用不同于从项目程序包引用资源。 虽然 config.json 文件中的项目配置允许你指定外部资源,但这仅适用于脚本。 若要通过 URL 引用 CSS 样式表,必须改用 SPComponentLoader
。
使用 SPComponentLoader 通过 URL 加载 CSS
在代码编辑器中,打开 ./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。 此 CSS 样式表是组合优化版 jQuery UI CSS,其中包含所有组件的基本样式、主题和样式设置。
运行以下命令,确认项目是否正在生成:
gulp serve
应使用标准的 jQuery UI 主题正确显示可折叠项并设置其样式。
分析生成的 Web 部件捆绑包(通过 URL 加载资源)的内容
在 Web 浏览器中生成项目后,打开 ./temp/stats/js-thirdpartycss.stats.html 文件。
注意:捆绑包总大小明显减小(在此方法中,总大小为 7 KB,而在将 jQuery 和 jQuery UI 添加到捆绑包中时,总大小超过 300 KB),图表中未列出 jQuery 和 jQuery UI,因为它们是在运行时加载。
SharePoint 框架概述