使用 Webpack4 打包 SPA 时，如何实现文件版本号控制及缓存优化-JavaScript中文网-JavaScript教程资源分享门户

前置知识

在介绍如何使用 Webpack4 实现文件版本号控制和缓存优化之前，需要了解一些前置知识：

Cache-Control：HTTP 响应头中的一个字段，用于控制浏览器如何缓存页面和静态资源。
- no-cache：每次请求都需要向服务器重新验证缓存是否过期，如果未过期，可以使用缓存。
- no-store：禁止缓存。
- public：可以被所有用户缓存，包括 CDN。
- private：只能被单个用户缓存。
- max-age=xxx：缓存过期时间，xxx 单位是秒。
文件版本号：在文件名中加入版本号，在文件内容变化时，更新版本号。
- 例如：main.1.0.0.js。

Webpack4 的优化方案

由于 Webpack4 在生产模式下自动进行了代码压缩和文件 hash 处理，因此文件版本号和缓存优化就很容易实现。

文件版本号

Webpack4 默认会在文件名中加入内容的 hash 值，但是如果只是加入 hash 值的话，就无法控制文件的版本信息。因此，我们需要手动增加一个版本号，例如：main.1.0.0.js。

在 Webpack 的配置文件中，可以使用 output.filename 字段来设置输出文件的名称。对于需要版本号控制的文件，我们可以在文件名中使用模板字符串来动态添加版本号：

output: {
  filename: '[name].[version].js',
  path: path.resolve(__dirname, 'dist')
},

然后在定义 Webpack 配置文件时，通过 webpack.DefinePlugin 将版本号传递到环境变量中：

plugins: [
  new webpack.DefinePlugin({
    VERSION: JSON.stringify('1.0.0')
  })
],

这样，在项目中就可以直接使用 VERSION 变量，例如：

import { VERSION } from '../constants';
console.log(VERSION);

缓存优化

如果静态资源的缓存时间过短，每次请求都需要从服务器下载资源，这样会造成性能瓶颈。因此，我们需要对静态资源进行缓存优化，减少请求次数，提升页面加载速度。

在 Webpack 的配置文件中，可以使用 output.filename 字段来设置输出文件的名称。对于需要缓存的文件，我们可以在文件名中使用模板字符串来添加 hash 值：

output: {
  filename: '[name].[hash:8].js',
  path: path.resolve(__dirname, 'dist')
},

这样每次文件内容发生变化时，文件名都会发生改变，浏览器会重新请求资源进行更新缓存。

另外，在 HTTP 响应头中，可以通过 Cache-Control 字段来控制文件的缓存时间。例如，设置 max-age=31536000，表示该文件缓存时间为一年：

app.get('/static/js/main.js', (req, res) => {
  const options = {
    headers: {
      'Cache-Control': 'public, max-age=31536000'
    }
  };
  res.sendFile(path.resolve(__dirname, 'dist/static/js/main.js'), options);
});

完整的缓存优化配置示例：

// javascriptcn.com 代码示例
output: {
  filename: '[name].[hash:8].js',
  path: path.resolve(__dirname, 'dist')
},
devServer: {
  contentBase: path.join(__dirname, 'public'),
  compress: true,
  port: 9000,
  after: function(app) {
    app.get('/static/js/main.js', (req, res) => {
      const options = {
        headers: {
          'Cache-Control': 'public, max-age=31536000'
        }
      };
      res.sendFile(path.resolve(__dirname, 'dist/static/js/main.js'), options);
    });
  }
},

总结

通过上述的介绍，我们了解了在 Webpack4 中，如何实现文件版本号控制和缓存优化，在实际项目中可以根据需求进行相应的配置和调整，提升网站性能和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534d8fc7d4982a6eba3742f