webpack+express实现文件精确缓存的示例代码

由于最近开发的个人博客（Vue + node）在使用过程中，发现网络加载有点慢，所以打算对它进行一次优化。本次优化的目标如下： index.html设置成no-cache，这样每次请求的时候都会比对一下index.html文件有没变化，如果没变化就使用缓存，有变化就使用新的index.html文件。其他所有文件一律使用长缓存，例如设置成缓存一年maxAge: 1000 * 60 * 24 * 365。前端代码使用webpack打包，根据文件内容生成对应的文件名，每次重新打包时只有内容发生了变化，文件名才会发生变化。以上三点结合，就能实现文件的精确缓在构建高性能的Web应用时，优化前端资源的加载速度至关重要。本示例主要探讨如何使用`webpack`和`express`来实现文件的精确缓存，从而提升用户体验。具体分为以下几个关键点： 1. **index.html的no-cache策略**：为了确保用户始终获取最新版本的首页，我们可以将`index.html`设置为`no-cache`。这意味着每次用户访问时，浏览器会向服务器发送请求检查文件是否更新。如果文件没有变化，则使用缓存版本；如果有更新，则加载新版本。在`express`中，可以通过设置响应头`Cache-Control`来实现这一策略，如下所示： ```javascript app.use((req, res, next) => { if (req.url === '/') { res.setHeader('Cache-Control', 'no-cache'); } next(); }); ``` 2. **其他文件的长缓存策略**：对于非`index.html`的其他静态资源，如CSS、JavaScript等，我们希望它们能被长时间缓存，以减少不必要的网络请求。这可以通过设置`maxAge`来实现，告诉浏览器资源的有效期。例如，缓存一年的设置为： ```javascript app.use(express.static('dist', { etag: false, maxAge: 1000 * 60 * 24 * 365, //缓存一年})); ``` `maxAge`的单位为毫秒，这里设置为一年的毫秒数。 3. **webpack打包优化**： `webpack`通过内容哈希(contenthash)来实现文件名的动态生成，当文件内容改变时，生成的哈希值也会随之改变。在`webpack`的配置文件中，可以通过`output.filename`来设置： ```javascript output: { filename: '[name].[contenthash].js', chunkFilename: '[name].[contenthash].js', path: path.resolve(__dirname, '../dist'), }, ```这里的`[contenthash]`会根据文件内容生成唯一的哈希值，确保文件变化时，URL也会改变。 4. **第三方库的分离与缓存**：对于稳定的第三方库，我们可以使用`webpack`的`splitChunks`插件来将其单独打包并设置长缓存。这可以提高页面加载速度，因为这些库通常不会频繁更改。以下是一个配置示例： ```javascript optimization: { runtimeChunk: { name: 'manifest' }, splitChunks: { cacheGroups: { vendor: { name: 'chunk-vendors', test: /[/]node_modules[/]/, priority: -10, chunks: 'initial', }, common: { name: 'chunk-common', minChunks: 2, priority: -20, chunks: 'initial', reuseExistingChunk: true, }, ```这里，`vendor`和`common`分别表示第三方库和公共模块的缓存组，通过`test`筛选出符合条件的模块，`minChunks`设定模块被引用的最小次数，`priority`用于解决多个缓存组匹配同个模块时的选择问题。 5. **按需加载（懒加载）**：结合前端框架（如Vue），我们还可以利用动态导入(`import()`)来实现组件的按需加载，进一步减少初始加载的资源量。通过合理配置`webpack`和`express`，我们可以实现前端资源的精确缓存，从而提高网页加载速度和用户体验。在实际项目中，还应注意监控和调整缓存策略，以适应不断变化的开发需求和用户行为。