在 Angular 应用中，有时候需要动态加载 JavaScript 文件，并在加载完成后立即使用它们提供的功能。本文将介绍如何在 Angular 中实现动态加载 js 的功能。
目录
动态加载 js 的必要性
Angular 采用模块化设计，能够有效降低代码的复杂度、提升代码的可维护性。但对于某些特定场景，例如需要动态加载某些模块或依赖库时，模块化可能带来的不便，这就需要我们采用一些特定的技术手段。
动态加载 js 除了满足某些特定场景的需求，也能有效降低 Angular 应用的首次加载时间。在某些情况下，加载一些不必要的 JavaScript 文件会拖慢应用的启动时间。
在 Angular 中动态加载 js 的方法
我们有多种方式在 Angular 中动态加载 JavaScript 文件：
1.使用 js 的原生方法 createElement
const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://www.example.com/example.js'; script.onload = function() { // 这里是脚本加载完毕回调 }; document.getElementsByTagName('head')[0].appendChild(script);
该方法加载成功后还需要一个回调函数，用于在脚本加载完成后执行自己的逻辑操作。
2.使用 scriptjs 库
scriptjs 是一个专门用于加载 JavaScript 文件的第三方库，对于在 Angular 中动态加载 js，使用 scriptjs 库会更加方便。
declare const $script: any; $script('https://www.example.com/example.js', () => { // 这里是脚本加载完毕回调 });
scriptjs 库的使用需要在 index.html 中加载该库的 JavaScript 文件：
<script type="text/javascript" src="path/to/script.js"></script>
3.使用 loadScript 服务
Angular 在 @angular/cli 的 9.0.0 以后已经内置封装了一个用于加载 JavaScript 文件的服务 loadScript。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ----------------- - ---- -------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ ---------- ------ - ------------------- ------------ ------------------ -- ---------- - ------------------------------------------------------------------- -- - -- ----------- --- - -展开代码
我们使用时只需在组件中注入 LoadScriptService，调用 load 方法即可。
Angular 中的 ngx-build-plus
采用以上任意一种方法都能实现在 Angular 中动态加载 js 的功能。但有时候我们需要把动态加载 js 的功能集成到 Angular 的构建流程之中，以便在部署时动态地加载某些用于特定场景的 JavaScript 文件。
ngx-build-plus 是一个使用 webpack 实现的 Angular 构建插件，它为我们的构建流程增加了更多的灵活性。使用 ngx-build-plus 我们可以在 Angular 的构建流程之中实现动态加载 js 的功能。
在 Angular 中集成 ngx-build-plus 只需要三个步骤：
安装
ngx-build-plus。npm install ngx-build-plus --save-dev
在
angular.json中启用 ngx-build-plus 插件。-- -------------------- ---- ------- - ------------ - -------- - ---------- ------------------------- ---------- - --------------------- --------------------------- - - - -
展开代码在项目根目录下添加
extra-webpack.config.js文件，并在该文件中配置如何加载外部 JavaScript 文件。module.exports = { externals: { 'jquery': 'jQuery', 'moment': 'moment', 'lodash': '_' } };
由于 externals 中的三个库都是已经引入了的，webpack 就不会把这三个库打包到最终的构建文件中。这样能够有效减少构建文件的大小，并显著提升 Angular 应用的启动速度。
性能考虑
在实际的使用中，动态加载 js 的能力不应滥用。在加载一些必要的第三方库时，可以采用上述技术来优化 Angular 应用的加载速度。但对于一些小功能或者一些表现效果，不应该再引入更多的依赖，以免影响应用性能。
示例代码
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ----------------- - ---- -------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ ---------- ------ - ------------------- ------------ ------------------ -- ---------- - ------------------------------------------------------------------- -- - -- ----------- --- - -展开代码
以上代码采用 LoadScriptService 动态加载外部 JavaScript 文件。
module.exports = { externals: { 'jquery': 'jQuery', 'moment': 'moment', 'lodash': '_' } }
以上代码实现在 Angular 应用中集成 ngx-build-plus 插件，用于优化构建文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7e69c306f20b3a6533ca0
