vue2 如何设置让 第三方类库或者静态资源,比如echarts 包 或者 element-ui 设置为强缓存

1. 对于使用 Vue CLI 创建的项目

可以通过配置 vue.config.js 中的 chainWebpack 来设置静态资源的缓存策略,然后结合服务器配置实现强缓存。

lua 复制代码
// vue.config.js module.exports = { chainWebpack: config => { // 对第三方库设置长时间的缓存 config.output .filename('js/[name].[contenthash:8].js') .chunkFilename('js/[name].[contenthash:8].js') // 对图片等静态资源设置缓存 config.module .rule('images') .use('url-loader') .tap(options => { options.name = 'img/[name].[hash:8].[ext]' return options }) } }

2. 服务器配置(关键)

强缓存主要通过服务器设置 Cache-ControlExpires 响应头来实现。

Nginx 配置示例:

javascript 复制代码
# 对 node_modules 中的第三方库设置强缓存(30天) location ~* /node_modules/(.*)\.(js|css)$ { expires 30d; add_header Cache-Control "public, max-age=2592000"; } # 对静态资源设置强缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { # 排除 index.html,避免其被缓存 if ($request_filename ~* ^.+\.(html)$) { expires -1; add_header Cache-Control "no-cache, no-store"; } # 其他静态资源缓存30天 expires 30d; add_header Cache-Control "public, max-age=2592000"; }

Apache 配置示例(.htaccess):

arduino 复制代码
# 对第三方库和静态资源设置强缓存 <IfModule mod_expires.c> ExpiresActive On # 脚本和样式文件缓存30天 ExpiresByType text/css "access plus 30 days" ExpiresByType application/javascript "access plus 30 days" # 图片文件缓存30天 ExpiresByType image/jpeg "access plus 30 days" ExpiresByType image/png "access plus 30 days" ExpiresByType image/svg+xml "access plus 30 days" # 设置Cache-Control头 Header set Cache-Control "public" </IfModule>

3. 关键说明

  • 强缓存原理 :通过设置 Cache-Control: max-age=xxxExpires 头,浏览器会在有效期内直接使用本地缓存,不向服务器发送请求

  • 缓存有效期:第三方库(如 echarts、element-ui)更新频率低,可以设置较长缓存(如 30 天)

  • 避免缓存问题

    • 对经常变动的文件(如 index.html)禁用缓存

    • 使用内容哈希(contenthash)命名文件,确保文件内容变化时文件名变化,从而绕过缓存

    • 对于可能更新的第三方库,建议使用 CDN 并利用其缓存策略

通过以上配置,既能实现第三方库和静态资源的强缓存以提高加载速度,又能确保在文件更新时用户能获取到最新版本。

相关推荐
拾忆,想起9 小时前
Redis复制延迟全解析:从毫秒到秒级的优化实战指南
java·开发语言·数据库·redis·后端·缓存·性能优化
禹曦a11 小时前
JavaScript性能优化实战指南
开发语言·javascript·性能优化
wallflower202014 小时前
Web Workers:前端多线程解决方案
性能优化·html
努力的小郑14 小时前
MySQL索引(三):字符串索引优化之前缀索引
后端·mysql·性能优化
摘星编程16 小时前
ChatGPT 协作排查:Node.js 内存泄漏的定位与修复
chatgpt·性能优化·node.js·ai辅助调试·chatgpt协作
三雒17 小时前
ART堆内存系列二:从堆中排除大对象
android·性能优化
没有bug.的程序员17 小时前
Redis 内存管理机制:深度解析与性能优化实践
java·数据库·redis·性能优化·内存管理机制
apocelipes17 小时前
C++20新增属性[[no_unique_address]]详解
c++·性能优化
DemonAvenger18 小时前
数据库迁移实战:最小化停机时间的方法与经验分享
数据库·sql·性能优化