掌握JS使用外链引入, Vue3引入外部JS

什么是JS外链引入？

JS外链引入是一种HTML编写方式，可以将网页中的JS代码抽离出来以单独的文件形式存在，通过在HTML页面中的script标签以src属性引入该文件，达到JS代码复用和维护的目的。

JS外链引入的好处有哪些？

1. 减少HTML文档体积：

JS外链引入可以将JS代码单独存在一个文件中，与HTML文档进行解耦，减少HTML文档的体积，让页面加载更快。

2. 提高代码复用性：

将JS代码抽离出来可以让多个页面调用同一个JS文件，提高代码重用性，减少代码冗余，降低开发难度和成本。

3. 方便代码维护：

JS外链引入可以让JS代码单独存在文件中，开发者可以针对这个文件进行版本控制、管理和维护，方便统一更新和修改。

Vue3中如何引入外部JS文件？

在Vue3中，引入外部JS文件有两种方式：

1. 从CDN库引入（常用）

Vue3可以从CDN库中引入相关库，如在Vue代码块中加入以下行，即可在template中使用Vue。

```

```

2. 从本地引入

在Vue3中，可以通过import语句引入外部JS文件。比如，需要在Vue组件中引入lodash.js，可以这样写：

```
// 引入lodash.js
import _ from 'lodash';
// 在Vue组件中使用
export default {
data() {
return {
userName: _.isEmpty(this.$route.params.userName) ? 'Stranger' : this.$route.params.userName,
}
}
}
```

JS外链引入的最佳实践

为了避免页面阻塞、提高页面性能，JS外链引入的最佳实践应该遵守以下规则：

1. 把JS代码放在body底部，或者加入defer和async属性

放在body底部可以让页面在加载完HTML和CSS之后再加载JS，加快页面呈现速度。defer和async属性可以让浏览器异步加载JS文件。（需要注意，这两者属性在早期的IE浏览器不被支持）

2. 压缩代码，减少代码体积

代码压缩可以减少代码体积，加快文件下载速度。

3. 倒序排列script标签

倒序排列script标签可以让后面的script标签在前面的script标签加载完后再开始加载。

总结

JS外链引入是前端开发中常用的技巧，通过编写复用性和可维护性较高的JS文件，可以提高开发效率和页面性能。在Vue3中引入外部JS文件也比较简单，可以从CDN库中引入也可以通过import语句引入外部JS文件。同时，需要注意JS外链引入的最佳实践规则，以达到最佳加载效果。