你可以通过以下方法在 JavaScript 中引入外部 JS 文件：使用 <script> 标签，设置 src 属性为文件路径。使用 async 或 defer 属性优化加载顺序。使用 import() 方法动态加载文件。在 CommonJS 环境中使用 require() 函数加载文件。请确保文件路径正确，避免在页面加载初期加载过多脚本，并根据需要选择合适的加载方法。
如何使用 JavaScript 引入外部 JS 文件
引入外部 JS 文件可以让你的代码组织更清晰，并提高性能。以下是 JavaScript 中引入外部 JS 文件的方法：
1. 使用 <script> 标签
最简单的方法是使用 <script> 标签。只需将 src 属性设置为外部 JS 文件的路径：
<code class="html"><script src="my-script.js"></script></code>
2. 使用 async 和 defer 属性
async 和 defer 属性可以优化脚本的加载性能：
-
async: 浏览器会在加载页面内容的同时加载脚本，但不会等到脚本执行完毕后再继续加载页面。 -
defer: 浏览器会在 DOMContentLoaded 事件触发后加载脚本，确保脚本在 DOM 加载完成后才执行。
<code class="html"><script src="my-script.js" async></script> <script src="my-script.js" defer></script></code>
3. 使用 import()
ES6 中引入了 import() 方法，可以动态加载 JS 文件：
<code class="js">import('./my-script.js')
.then(module => {
// 脚本加载完毕后执行代码
})
.catch(error => {
// 加载脚本失败时的处理逻辑
});</code>4. 使用 CommonJS 模块
如果你使用的是 Node.js 或其他 CommonJS 环境，可以使用 require() 函数加载 JS 文件：
<code class="js">const myScript = require('./my-script.js');
// 访问脚本中的变量和函数</code>注意：
- 确保外部 JS 文件的路径正确。
- 尽量避免在
<head>中加载过多的脚本，这会阻塞页面的渲染。 - 使用适当的加载方法，如
async或defer，以优化性能。
