在SharePoint Framework中动态加载第三方的包，以及react组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shrenk/article/details/84628036

在使用SharePoint framework的时候，通常需要加载第三方的包，这些包在执行代码捆绑操作的时候，会一起打包到一个js文件中，使得最后生成的js文件巨大，在加载的时候会很慢，影响页面的性能，这里介绍如何动态加载第三方的包，仅在需要的时候加载。

首先创建SPFx项目，配置如下：

创建完成之后，使用VS Code打开，在termimal中执行gulp bundle命令进行捆绑，结束之后会在dist文件夹中生成一个js文件”dynamic-import-demo-web-part.js“。

然后使用gulp serve，启动本地的work bench工作台，将webpart添加到页面中，打开Chrome的调试工具，可以看到在这个js文件加载了，文件大小是27.7KB

然后我们引入第三方的包”moment“，这是一个常用的用来处理日期的包，在termimal中使用 npm install moment安装，然后导入到webpart项目中，如下所示。

如果只是导入了这个包，而不在代码中使用的话，SPFx在捆绑时候会自动忽略这个包，所以不会有性能的损失，所以要在代码某处使用moment，才会将moment的代码捆绑到dynamic-import-demo-web-part.js文件中。可以将如下代码插入到render方法中来调用moment：

console.log(moment(new Date().toDateString()));

然后在工作台中重新添加webpart，我们发现由于引用了moment，重新捆绑之后的js文件变大了，从28KB变成了587KB，加载时间也相应变长了。

扫描二维码关注公众号，回复： 5426057 查看本文章

下面来看一下如何动态加载。首先注释掉掉import moment语句，然后在类中添加如下GetNow函數，并在render中调用：

然后执行gulp bundle命令进行捆绑：

可以看到多出來一个js文件“0.0_722bff734311cb1d76ad.js”。这个是为moment单独生成的js文件，所以可以动态加载。

加载webpart的時候可以看到，两个js文件分开加载了：

由此可见moment是在调用GetNow方法的时候动态加载的。

除此之外，也可以使用同样的方法，动态加载一个react的组件，当render这个react组件的时候，才会将相应的js文件加载到页面上。例如在comonents文件夹下有一个myComponent组件，就可以使用下面代码动态加载：

const myComponent = await import(
          /* webpackMode: "lazy" */
          /* webpackChunkName: 'my-component' */
          './components/myComponent'
        );

动态加载可以提高webpart的性能，所以应该在可以使用动态加载的地方优先使用。