【Webpack】实现恒久化缓存

回答重点

在 Webpack 中实现恒久化缓存有几个关键计谋，最核心的就是使用文件内容哈希，使得文件名发生变化，如许浏览器就会识别为新的资源而不是使用缓存的旧资源。具体步骤如下：
1）使用 output.filename 和 output.chunkFilename 配置项来添加哈希：

1. output: {
2.   filename: '[name].[contenthash].js',
3.   chunkFilename: '[name].[contenthash].js',
4. }

复制代码

2）使用合适的插件来优化缓存，比方 HtmlWebpackPlugin 生成带有哈希的文件引用，以及 MiniCssExtractPlugin 用于 CSS 文件名哈希：

1. const HtmlWebpackPlugin = require('html-webpack-plugin');
2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4. plugins: [
5.   new HtmlWebpackPlugin({
6.     template: './src/index.html',
7.   }),
8.   new MiniCssExtractPlugin({
9.     filename: '[name].[contenthash].css',
10.   }),
11. ]

复制代码

3）开启长效缓存管理：使用 webpack.NamedModulesPlugin 和 webpack.HashedModuleIdsPlugin，确保模块id在内容不变的环境下保持一致：

1. optimization: {
2.   moduleIds: 'hashed',
3. }
4. plugins: [
5.   new webpack.HashedModuleIdsPlugin(),
6. ]

复制代码

4）分离供应商代码（第三方库）和应用代码，使用 SplitChunksPlugin：

1. optimization: {
2.   splitChunks: {
3.     chunks: 'all',
4.   },
5. }

复制代码

扩展知识

在实现恒久化缓存方面，我们可以进一步优化和明白一些概念和工具：
1）Contenthash 与 Chunkhash：相识 contenthash 和 chunkhash 的区别至关重要。contenthash 是基于文件内容生成的哈希，任何内容改变都会导致哈希变化。而 chunkhash 则是基于整个 chunk 的内容举行哈希计算。
2）缓存优化计谋：

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

3）Tree Shaking 和 Dead Code Elimination：

• 使用 mode: 'production' 和 TerserWebpackPlugin 来启用 Tree Shaking 和去除无用代码，减少终极产出文件体积。
  

4）Differential Loading：针对差别的浏览器特性生成差别的构建版本 (现代浏览器和旧版浏览器)，使用 @babel/preset-env 的 targets 选项和 Webpack 的 environment 目标举行指导。
5）Monitor Cache Performance：使用工具如 Lighthouse 来分析和评估缓存性能，从具体的陈诉中找出改进点。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。