如何让js文件只加载一次

在JavaScript中，确保一个文件只被加载一次可以通过多种方式实现。以下是几种常见的方法：

1. 使用模块系统（ES6 Modules）

如果你使用的是现代浏览器或Node.js环境，可以利用ES6的模块系统来自动处理模块的单次加载。

// myModule.js
export const myFunction = () => {
    console.log('This function is from myModule');
};

// main.js
import { myFunction } from './myModule.js';
myFunction();

在ES6模块系统中，每个模块只会被加载一次，即使它在多个地方被导入。

2. 使用动态`import()`

动态import()函数也可以确保模块只被加载一次。

let moduleLoaded = false;

async function loadModule() {
    if (!moduleLoaded) {
        const module = await import('./myModule.js');
        module.myFunction();
        moduleLoaded = true;
    }
}

loadModule();

3. 使用全局变量作为标志

在全局作用域中设置一个标志变量来检查模块是否已经被加载。

// myModule.js
if (!window.myModuleLoaded) {
    window.myModuleLoaded = true;
    // 模块的代码
    console.log('myModule loaded');
}

// main.js
if (!window.myModuleLoaded) {
    const script = document.createElement('script');
    script.src = 'myModule.js';
    document.head.appendChild(script);
}

4. 使用HTTP缓存

通过设置适当的HTTP缓存头，可以让浏览器缓存JavaScript文件，从而避免重复下载。

Cache-Control: public, max-age=31536000

这样，浏览器会在缓存有效期内重用已下载的文件。

5. 使用Webpack等构建工具

如果你使用Webpack这样的模块打包工具，它会自动处理模块的重复加载问题，并且可以通过配置来优化缓存策略。

// webpack.config.js
module.exports = {
    // 其他配置...
    output: {
        filename: '[name].[contenthash].js',
        path: __dirname + '/dist'
    }
};

使用[contenthash]可以确保文件名在内容变化时才改变，从而利用浏览器的缓存机制。