服务器上webpack打包的过期hash文件如何进行清理

本篇文章给大家带来的内容是关于服务器上webpack打包的过期hash文件如何进行清理,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

现在前端的项目基本上都会用 webpack 打包代码,并且文件名(html 文件除外)都是 hash 化的,这样可以去除浏览器的缓存。但是会产生另外一个问题,就是服务器上会堆积大量过期(不会被用到)的 hash 文件,这些文件又主要是 js 和 css 文件,因为基本上每构建一次都会产生新的 js 和 css 文件。如果这些文件不清除的话,会大量占用服务器存储空间。

1. 思路

1、从 html 文件中读取 css 文件的 hash 值集合;

2、然后根据这些 hash 值集合,把 hash 不在这个集合内的 css 文件删掉;

3、从 html 文件中读取 js 文件的 hash 值集合;

4、然后根据这些 hash 值集合,把不属于动态加载的,并且 hash 不在这个集合内的 js 文件删掉;(动态加载 js 参考 dynamic-imports)

5、从不属于动态加载的 js 文件中读取动态加载的js 文件的 hash 值集合;

6、然后根据这些 hash 值集合,把动态加载的,并且 hash 不在这个集合内的 js 文件删掉;

7、从剩下的 html,css,js 文件中读取图片、字体等其他静态资源文件的 hash 值集合;

8、然后根据这些 hash 值集合,把 hash 不在这个集合内的静态资源文件删掉。

2. sclean

基于上面这个思路,我封装了一个 npm 包:sclean.

主要有以下几个功能:

1、备份服务器文件,因为删除是非常危险的一个操作,所以在每次清除过期文件之前都会备份一次,当然也可以手动备份;

2、恢复服务器文件到之前备份的某个状态(用于清除出错之后的恢复操作);

3、根据配置进行清除操作,比如自定义目标目录(dist, build),html文件(php, jsp),hash 长度(32, 8)等。

安装

npm install sclean -g

执行清除操作

sclean

以上就是服务器上webpack打包的过期hash文件如何进行清理的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1547031.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:45:44
下一篇 2025年12月21日 18:46:04

相关推荐

  • HTML表单的工作原理(图文)

    本篇文章给大家带来的内容是关于html表单的工作原理(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在前端语言书写中,表单是一种常用的数据传递方式,也是一种行之有效的比较高效率的方式。 其工作原理 为:访问一个包含表单的页面,输入表单信息之后提交表单——通过data,将浏览…

    2025年12月21日 好文分享
    000
  • 关于http前端存储的总结

    本篇文章分享给大家的内容是关于http前端存储的总结,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。 cookie 为什么会有cookie http协议的无状态,所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的,就好比你经常去一家超市买东西,…

    2025年12月21日 好文分享
    000
  • 一次前端面试的经历

    今天给大家分享我之前找工作的面试经历,我辞去了杭州的工作之后去往了深证,给大家分享一下我面试的4次经历 写在最前面: 上个月底辞掉了在杭州的工作,来到了广州开始找工作,讲道理广州的这座城市的经济中心真的不在互联网,个人感觉还不如互联网发展的杭州,找了一个礼拜的工作之后,少许感悟 第一家面试公司: 第…

    好文分享 2025年12月21日
    000
  • 关于前端面试(二)

    今天给大家分享我之前找工作的面试经历,我辞去了杭州的工作之后去往了深证,给大家分享一下我第二波面试的经历。 面试了两了礼拜,首先第二个礼拜的质量表示没有第一个礼拜的质量好,几乎没有面试到什么质量高的公司,下面总结 不知道是第几家家公司: 这家公司是做金融的,需要在线上推广之类的,需求很简单,写写静态…

    好文分享 2025年12月21日
    000
  • 什么是前端

    这次给大家带来什么是前端,前端的概念详解,一起来看一下。 过年的时候和表哥聊天,他说以前也用html,js,css写过网页,那现在的前端和那个时候有什么不同,我当时就向他介绍了一下前端。 但是当时我对前端的理解也不是很透彻,所以我自我感觉也没有介绍清楚。 随着我自己学习的深入,我自己觉得有必要总结一…

    好文分享 2025年12月21日
    000
  • 什么是前端路由及解释

    什么是前端路由 所谓的前端路由,拥有这样一种能力:客户端浏览器可以不依赖服务端,根据不同的URL渲染不同的视图页面。 前端路由的存在合理性 在Ajax之剑还未亮出,前端仍处于襁褓之中的时候,路由的工作交给了后端。在进行页面切换的时候,浏览器发送不同的url请求;服务器接收到浏览器的请求时,通过解析不…

    好文分享 2025年12月21日
    000
  • 前端的VUE怎么使用

    我用vue做项目也有一段时间了,对于vue来说现在已经比较熟悉了,但是关于vue的入门文章却一直没有写过,那么今天就给大家带来几个案例,好好介绍下vue这种好用的小工具。 相关视频教程推荐:Vue.js 教程推荐:2018最新的5个vue.js视频教程精选 1.本篇文章使用的vue版本是2.4.2,…

    好文分享 2025年12月21日
    000
  • 好用的67个前端工具、库和资源

    这个列表包含许多种类的资源,所以这里我将它们分组整理。 Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.j…

    好文分享 2025年12月21日
    000
  • 怎样零基础学习前端开发

    对于很多想转行的朋友来说,最大的担心就是觉得自己对计算机不太懂,最多会打个游戏,更别说计算机语言基础了。担心自己一点基础没有,不会学也学不会。下面我们就以前端开发为例,分享下如何零基础学会前端开发。 1.首先学习前端,必须要学会的就是HTML和CSS。 有关HTML和CSS的相关基础知识点,可以在P…

    好文分享 2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • javascript怎样进行物理模拟?_javascript的物理引擎如何集成?

    JavaScript需借助第三方物理引擎实现物理模拟,推荐Matter.js(2D易用)、Planck.js(高精度2D)、Cannon.js(3D)、Impulse.js(轻量);集成时应隔离物理循环与UI框架,谨慎同步状态以保证稳定性。 JavaScript 本身不内置物理模拟能力,但可以通过第…

    2025年12月21日
    000
  • 如何使用javascript操作DOM_常见方法有哪些?

    JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素;常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等,配合事件委托可高效实现动态交互。 Java…

    2025年12月21日
    000
  • 如何实现JavaScript验证表单_前端验证的最佳实践是什么

    JavaScript表单验证核心是提升体验与保障基础数据质量,但不可替代后端验证;需结合HTML5原生属性与JS增强交互,确保提示清晰可访问,并始终信任后端校验。 JavaScript 表单验证的核心目标是提升用户体验和保障基础数据质量,但它不能替代后端验证。前端验证应快速反馈、友好提示、不干扰正常…

    2025年12月21日
    000
  • JavaScript树形结构数据如何操作?

    JavaScript树形结构操作核心是递归与引用处理:查找需递归匹配id并判空children;添加需先定位父节点并初始化children;删除须从父级children中过滤目标节点;扁平化用DFS递归,还原依赖parent_id分组挂载。 JavaScript树形结构数据操作核心是递归和引用处理,…

    2025年12月21日
    000
  • javascript CSP策略是什么_如何防止跨站脚本攻击?

    CSP是一种浏览器强制执行的白名单式安全策略,通过HTTP头或meta标签限制资源加载以防止XSS。需禁用内联脚本与eval、改用事件监听、显式声明第三方域名,并配合服务端转义等其他防护措施。 JavaScript CSP(Content Security Policy,内容安全策略)是一种浏览器安…

    2025年12月21日
    000
  • JavaScript服务端渲染_javascriptSEO优化

    服务端渲染(SSR)通过在服务器端生成完整HTML,使搜索引擎爬虫无需执行JavaScript即可抓取页面内容,从而提升JavaScript应用的SEO效果。Next.js、Nuxt.js等主流框架提供开箱即用的SSR支持,结合动态title与meta标签、语义化结构、Open Graph标签及si…

    2025年12月21日
    000
  • javascript的SEO优化有哪些方法_如何让单页应用被搜索引擎收录

    单页应用(SPA)需通过服务端渲染(SSR)、预渲染或动态渲染使爬虫获取完整HTML,辅以语义化标签、动态元信息、规范路由及Sitemap等基础SEO实践来提升搜索引擎收录效果。 单页应用(SPA)默认对搜索引擎不友好,因为传统爬虫难以执行 JavaScript 渲染页面内容。要让搜索引擎收录 SP…

    2025年12月21日
    000
  • JavaScript模块化有哪些规范_CommonJS和ES6有何区别?

    JavaScript模块化主流规范有CommonJS和ES6 Module两种广泛落地,前者用于Node.js默认环境,后者获现代浏览器及新版Node原生支持;AMD/CMD已基本淘汰。 JavaScript模块化主要有四种主流规范:CommonJS、AMD、CMD 和 ES6 Module(ESM…

    2025年12月21日
    000
  • javascript的Cookie是什么_如何设置和读取用户信息?

    Cookie是浏览器提供的客户端小型文本存储机制,用于保存登录状态等数据,由服务器通过Set-Cookie设置、浏览器自动回传,具大小限制、作用域控制及HttpOnly等安全属性。 Cookie 是浏览器提供的一种小型文本存储机制,用于在客户端(用户电脑)保存少量数据,比如登录状态、用户偏好或会话标…

    2025年12月21日
    000
  • JavaScript中如何实现模块化_CommonJS和ES6区别

    JavaScript模块化主要有CommonJS和ES6两种方式:前者用require/module.exports,运行时同步加载,Node原生支持;后者用import/export,编译时静态分析,浏览器和新Node版本原生支持;二者长期共存、各司其职。 JavaScript模块化主要靠 Com…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信