SharePoint Framework 在web部件中使用已存在的JavaScript库

  • 时间:
  • 浏览:7
  • 来源:uu快3开奖_uu快3娱乐_输钱

import * as angular from 'angular';

接下来通过TypeScript使用Angular,都要安装类型:

"angular": {

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

"globalName": "angular"

}

删剪的文件内容大致如下所示:

{

"entries": [

接下来在config/config.json文件中的externals属性中加入一条绳子 :

博客地址:http://blog.csdn.net/FoxDave

import * as angular from 'angular';

由于你在项目中再加在却说 也使用Angular的web部件,在编译后愿意发现有却说 170KB的文件。却说 当你在页面中并肩加在这却说 web部件的随后 ,就会加载两次同样内容的较大的脚本文件,这严重影响了性能。

npm install @types/angular --save

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

import * as strings from 'helloWorldStrings';

import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';

export default class HelloWorldWebPart extends BaseClientSideWebPart {

public render(): void {

引用已居于的JavaScript库的通常措施是以包的形式安放进项目中。拿Angular举例,首先在项目中安装它的包:

export default class HelloWorldWebPart extends BaseClientSideWebPart {

public render(): void {

npm install angular --save

这些措施却说 都要进行包的安装,却说 都要安装类型:

// omitted for brevity

}

}

}

最后,在你的web部件中引用Angular就能不都都可不可不可以了,跟随后 没哪几个区别:

然而这些措施有的是这些缺陷。在编译SPFx中已居于的JavaScript框架时,所有引用的脚本都被中有 在生成的单一文件中,以Angular为例,这些生成后的文件有170KB。

npm install @types/angular --save

}

}

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';

在构建SPFx客户端web部件时,愿意使用公网已有的JavaScript库来构建强大的除理方案。却说 在使用的随后 你都要考虑你引用的东西没办法 影响SharePoint页面的性能。

却说 更好的引用已居于的库的实现措施是作为内部管理资源进行引用。却说 在web部件中就不都都可不可不可以却说 脚本的URL就够了,我我真是跟web页面的编写是却说 意思,在页面加载的随后 会自动去加载指定URL的资源。

// omitted for brevity

}

再次编译你的项目愿意发现这次的大小不都都可不可不可以6KB。

SPFx使用基于开源的工具链进行编译,如gulp和Webpack。在编译SPFx项目时,哪几个编译工具会在却说 叫做bundling的任务管理器中自动将所有引用的资源打包到却说 单一的JavaScript文件中。这些措施有却说优点。首先,所有web部件都要的资源有的是却说 单一的JavaScript文件中可用。这冗杂了web部件的部署步骤,不容易产生遗漏。由于你的web部件使用了不同的资源,以正确的顺序逐个加载是一阵一阵要的。并肩这些措施也对终端用户有益。一般来说,下载却说 较大的单一文件要比下载好多小文件要快,进而你的web部件也会在页面上放慢地完成加载。

由于你再加在却说 web部件,没办法 就会生成却说 大小为6KB的文件。说到这里一群人 由于会有现象报告 ,这实际上却说 大小变了而已,却说 并没改变加载文件的数量。我我真是有的是的,前这些措施是将要引用的库并肩打包到了JS文件中,实际上要花费加载了两次;而对于内部管理引用这些措施,内部管理的资源如Angular只加载一次,却说 得益于缓存机制,内部管理引用的资源很由于由于在用户访问你的web部件时加载好了,没办法 看我我真是是提高了性能。

],

"externals": {

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

import {

BaseClientSideWebPart,

IPropertyPaneConfiguration,

PropertyPaneTextField

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

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

},

"localizedResources": {

最后,在你的web部件中引用Angular,使用import声明: