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 并利用其缓存策略

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

相关推荐
wayne21420 分钟前
React Native启动性能优化实战:Hermes + RAM Bundles + 懒加载
react native·react.js·性能优化
文人sec31 分钟前
性能测试-jmeter15-性能项目计划流
分布式·jmeter·性能优化·grafana·prometheus·模块测试
UWA3 小时前
游戏在高负载场景下,整机功耗控制在多少
游戏·unity·性能优化·游戏开发
武子康4 小时前
Java-136 深入浅出 MySQL Spring Boot @Transactional 使用指南:事务传播、隔离级别与异常回滚策略
java·数据库·spring boot·mysql·性能优化·系统架构·事务
roman_日积跬步-终至千里1 天前
【软件架构设计(40)】数据库规范化与性能优化
数据库·oracle·性能优化
一个天蝎座 白勺 程序猿1 天前
Oracle与Kingbase深度兼容体验:从连接配置到性能优化全解析
数据库·oracle·性能优化·kingbase·金仓数据库
陈尕六1 天前
SQL优化实战经验指南
mysql·性能优化
DemonAvenger1 天前
深入 Redis Set:从功能优势到项目实战的最佳实践
redis·性能优化·nosql
Z_Wonderful2 天前
同时使用ReactUse 、 ahooks与性能优化
react.js·性能优化·typescript
帅次2 天前
系统分析师-软件工程-软件开发环境与工具&CMM&CMMI&软件重用和再工程
性能优化·软件工程·软件构建·需求分析·规格说明书·代码复审·极限编程