Webpack实现长缓存优化

1.关键点

在Web开发中，长缓存（也称为缓存复用）是一种优化技术，旨在减少用户每次访问网站时加载的资源数量，从而提高加载速度和用户体验。

在 Webpack 中实现长缓存有几个关键策略，最核心的就是利用文件内容哈希，使得文件名发生变化，这样浏览器就会识别为新的资源而不是使用缓存的旧资源。

2.Webpack实现长缓存优化的方式

2.1 使用[contenthash]在文件名中

Webpack 允许你在输出文件的文件名中使用 [contenthash] 占位符。这样，只有当文件内容发生变化时，文件名才会改变，从而利用浏览器的缓存机制。

例如，在Webpack配置中修改 output 部分：

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
}

2.2 配置optimization

在Webpack 4及以上版本，你可以使用 optimization 配置来进一步优化缓存。例如，启用 SplitChunksPlugin 来分割代码，并使用缓存组（cacheGroups）来控制缓存分割：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        enforce: true
      }
    }
  }
}

2.3 使用HardSourceWebpackPlugin插件

HardSourceWebpackPlugin 是一个可以显著提高构建速度的插件，它通过缓存生成的模块和块来避免在每次构建时重复编译相同的文件。虽然它主要用于提高构建速度，但也可以间接帮助实现长缓存：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

2.4 使用CompressionWebpackPlugin进行资源压缩和缓存控制

使用 CompressionWebpackPlugin 来压缩输出的JS、CSS文件，并通过设置HTTP头来控制缓存：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
module.exports = {
  plugins: [
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240, // 只处理大于10k的文件。
      minRatio: 0.8 // 压缩率至少为0.8。
    })
  ]
};

3.扩展知识

在实现缓存方面，我们可以进一步优化和理解一些概念和工具：

• Contenthash 与 Chunkhash：
  了解 contenthash 和 chunkhash 的区别至关重要。contenthash 是基于文件内容生成的哈希，任何内容改变都会导致哈希变化。而 chunkhash 则是基于整个 chunk 的内容进行哈希计算。

• 缓存优化策略：

  • 浏览器缓存：配置 HTTP 头，如 Cache-Control 和 ETag，使得浏览器缓存策略与文件名哈希结合，进一步提升缓存效率。
  • Service Worker：利用 Service Worker 缓存策略，通过 Workbox 等工具实现更细粒度的缓存控制。

• Monitor Cache Performance：
  使用工具如 Lighthouse 来分析和评估缓存性能，从具体的报告中找出改进点。