JS文件加载的方式主要有：通过HTML中的<script>标签、动态创建<script>标签、模块化加载工具、异步加载。 其中，通过HTML中的<script>标签是最常见且简单的方式。将JavaScript文件通过<script>标签嵌入HTML页面中，可以直接在网页加载时执行JS代码。这种方式适用于大部分简单的Web开发场景。下面将详细介绍这些加载方式，并探讨它们的优缺点和使用场景。
一、通过HTML中的<script>标签加载
1、基本用法
在HTML文件中，通过<script>标签加载JS文件是最基础且常见的方式。你只需将JS文件的路径作为src属性的值即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<script src="app.js"></script>
</body>
</html>
这种方式的优点是简单直观，适合初学者和简单的项目。缺点是当多个JS文件依赖顺序时，可能会出现加载顺序问题，影响执行效果。
2、defer和async属性
为了优化页面加载速度，可以使用defer和async属性。
-
defer：表示脚本在页面解析完成后再执行，且多个
defer脚本按顺序执行。<script src="app.js" defer></script> -
async：表示脚本异步加载，加载完成后立即执行，多个
async脚本的执行顺序不确定。<script src="app.js" async></script>
二、动态创建<script>标签
1、基本用法
通过JavaScript代码动态创建<script>标签并将其插入到DOM中，这种方式可以实现按需加载JS文件，尤其在单页应用中很有用。
function loadScript(url) {
var script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
}
loadScript('app.js');
2、使用场景
这种方式适用于需要按需加载JS文件的场景，例如用户操作触发某个功能时再加载对应的JS文件。优点是灵活性高，可以动态控制加载时机和顺序。缺点是需要更多的代码和逻辑处理。
三、模块化加载工具
1、使用ES6模块
ES6引入了模块化机制，可以通过import和export关键字实现模块化加载。
// module.js
export function greet() {
console.log('Hello World');
}
// main.js
import { greet } from './module.js';
greet();
在HTML中需要使用type="module"来加载JS文件：
<script type="module" src="main.js"></script>
2、使用模块化加载工具
常见的模块化加载工具包括Webpack、Parcel等。这些工具可以将多个JS文件打包成一个或多个文件，实现依赖管理和按需加载。
// 使用Webpack打包
import greet from './module';
greet();
3、使用场景
模块化加载工具适用于大型项目和团队协作开发，可以有效管理依赖和优化打包过程。优点是模块化管理、按需加载和性能优化。缺点是需要配置和学习成本。
四、异步加载
1、基本用法
异步加载可以通过动态创建<script>标签并监听其加载事件来实现。
function loadScriptAsync(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadScriptAsync('app.js', function() {
console.log('Script loaded!');
});
2、使用场景
异步加载适用于需要确保某个JS文件加载完成后再执行后续逻辑的场景，例如第三方库的加载。优点是可以控制加载顺序和执行时机，缺点是需要更多的代码和逻辑处理。
五、加载优化
1、减少JS文件数量
减少JS文件的数量可以减少HTTP请求，提高页面加载速度。可以通过合并多个JS文件或使用打包工具来实现。
2、压缩JS文件
通过压缩工具（如UglifyJS、Terser）可以减少JS文件的体积，提高加载速度。
3、使用CDN
将常用的第三方库通过CDN加载，可以利用CDN的缓存和分发网络，提高加载速度。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
4、延迟加载和按需加载
通过延迟加载和按需加载可以减少初始加载时间，提高页面响应速度。例如，可以在用户滚动到某个区域时再加载对应的JS文件。
document.addEventListener('scroll', function() {
if (window.scrollY > 500) {
loadScript('lazy.js');
}
});
六、工具和框架的支持
1、使用Webpack优化加载
Webpack作为现代前端开发的常用工具，可以通过其插件和配置实现代码拆分、按需加载和性能优化。
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
2、使用Parcel简化打包
Parcel是一个零配置的打包工具，可以快速上手并实现按需加载和性能优化。
import { greet } from './module';
greet();
3、项目管理系统推荐
在大型项目和团队协作中，使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以有效管理项目进度和任务分配，提高开发效率。
七、总结
JavaScript文件的加载方式多种多样，各有优缺点。选择合适的加载方式和优化手段，可以提高页面加载速度和用户体验。通过HTML中的<script>标签加载是最基础的方式，动态创建<script>标签适用于按需加载，模块化加载工具（如Webpack、Parcel）适用于大型项目和团队协作，异步加载可以实现更灵活的加载控制。
核心观点：通过HTML中的<script>标签、动态创建<script>标签、模块化加载工具、异步加载。 各种方式都有其适用的场景和优缺点，选择合适的方式和优化手段，根据项目需求进行合理配置，能够显著提升项目的开发效率和用户体验。
相关问答FAQs：
1. 为什么我的网页加载了js文件后，页面没有任何变化？
通常情况下，加载js文件后网页应该有相应的变化，但如果没有变化可能是由于以下原因导致的：a) js文件没有被正确加载到网页中；b) js文件中的代码没有被正确执行；c) js文件中的代码没有与网页中的元素进行正确的交互。您可以通过检查js文件的加载路径、代码是否正确以及与网页元素的交互逻辑来解决这个问题。
2. 如何优化js文件的加载速度？
如果您的网页加载速度较慢，可能是由于js文件的加载速度较慢所导致的。您可以尝试以下优化方法来提高js文件的加载速度：a) 将js文件放置在页面底部，这样可以确保页面内容先加载完毕；b) 压缩js文件，减小文件大小；c) 使用cdn来加载js文件，加快文件的加载速度；d) 使用异步加载js文件的方法，避免阻塞页面其他内容的加载。
3. 如何在网页中加载外部的js文件？
在网页中加载外部的js文件可以使用<script>标签来实现。您可以通过以下步骤来加载外部的js文件：a) 在网页的<head>标签中使用<script src="your_js_file.js"></script>来引入外部的js文件；b) 将<script>标签放置在网页的<body>标签内，这样可以确保js文件在页面内容加载完毕后再加载；c) 使用async或defer属性来实现异步加载js文件，提高网页的加载速度。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3906723
