怎样使js不缓存

在网页开发中，JavaScript 缓存有时会给开发者带来困扰，比如更新了 JS 文件内容，页面却依旧加载旧版本。那么，怎样有效避免 JS 缓存呢？

一种常用方法是在 URL 中添加版本参数或时间戳。例如，原本的引用是<script src="example.js"></script>，我们可以修改为<script src="example.js?v=1"></script>。每次对 JS 文件有更新时，将版本号 v 的值递增，如改为 v=2、v=3 等。这能让浏览器认为这是一个全新的资源，从而绕过缓存直接加载最新内容。使用时间戳也是类似原理，<script src="example.js?t=1689834567"></script>，由于时间戳不断变化，浏览器会判定为新资源并重新加载。

利用 HTTP 头信息控制缓存也是不错的选择。在服务器端设置响应头，禁止缓存。以 Node.js 为例，借助 Express 框架，可以这样操作：

const express = require('express');
const app = express();
app.get('/example.js', (req, res) => {
    res.set('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.set('Pragma', 'no-cache');
    res.set('Expires', '0');
    res.sendFile(__dirname + '/example.js');
});
const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

这段代码通过设置Cache-Control、Pragma和Expires等响应头，告诉浏览器不要缓存该 JS 文件。

对于静态资源管理工具，如 Webpack，也有相应策略。Webpack 可以通过插件对输出的文件名添加哈希值。在配置文件中添加如下内容：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        })
    ]
};

这样，每次构建项目时，生成的 JS 文件名都会带有基于文件内容生成的哈希值。只要文件内容改变，哈希值就不同，浏览器就会将其当作新文件加载，有效避免了缓存问题。

通过这些方法，能在不同场景下确保 JS 文件不被缓存，让页面始终加载最新的代码，提升开发效率和用户体验。