ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Webpack】实现恒久化缓存 [打印本页]

作者: 缠丝猫 时间: 2024-9-26 03:06
标题: 【Webpack】实现恒久化缓存
回答重点

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

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

复制代码

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

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
]

复制代码

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

optimization: {
moduleIds: 'hashed',
}
plugins: [
new webpack.HashedModuleIdsPlugin(),
]

复制代码

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

optimization: {
splitChunks: {
chunks: 'all',
},
}

复制代码

扩展知识

在实现恒久化缓存方面，我们可以进一步优化和明白一些概念和工具：
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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)