头图

利用插件去掉Parcel2打包文件的hash值

一、前言

Parcel2的问世,极大提高了打包的灵活度,但是parcel2在打包时,会根据打包文件的依赖关系和parcel的配置,决定是否给文件添加唯一的hash值。例如index.js打包后可能会变成index.794a6267.js。那么如何根据我们的需要决定是否要加上hash值呢?

二、Parcel2 content hashing

在parcel2的介绍中,有个重要的特性,就是content hashing。它是干什么的呢?Parcel在build文件时,会自动根据文件内容生成hash值,主要是为了给浏览器做缓存使用。当你的文件内容发生变化后,hash值也会相应变化,浏览器就会加载最新的文件。如果hash值没有发生变化,则浏览器会使用缓存的文件。

默认情况下,parcel会自动给依赖的文件加上对应的hash值,除了一些入口文件如index.html或者依赖库文件等,需要稳定的文件名,不会添加hash值外,其他文件parcel会自动判断是否需要添加hash值。

如果你想在每次打包时使文件名固定,可以在parcel打包命令后加上--no-content-hash

"build:popup": "parcel build src/index.html --no-source-maps --no-content-hash"

但这种方式并不会去掉文件名后的hash值,而只是让这个hash值始终不会变化。

三、为何需要去掉hash值

一般情况下,比如我们用vue或者react写web端的网站,这种单页应用,往往就1个入口文件,其余的所有css或者js都是在框架层之中会被处理掉,我们也不需要关心这些文件打包后的名称,所以这些文件都被加上hash值,对于缓存更友好,我们无需再去关心。

但存在另一种情况,当我们不是单纯的写1个网页,可能是写一个web extension,或者其他工具等,这些东西的文件结构往往都是相对固定的,且存在官方要求的配置文件,需要你明确指定每个功能对应的是什么文件名(比如wen extentsion)。那么这种情况我们就不能给这些文件加上hash值,即使这个hash值始终是固定的,但由于我们无法预知这个hash值是什么,所以在配置文件中我们就没法写固定的文件名了。

四、插件系统 Plugin

针对这种情况,parcel提供了一种解决方案,如果对于parcel自动生成的文件名无法满足需求,则可以通过plugin来修改每个打包后的文件名。parcel将plugin分为了许多模块,有transformers(比如针对vue文件做转换),有Namers(针对文件名做处理)等等,每个插件负责的功能不同,执行时机也不同。Namers插件就是在打包完成后执行的,允许你自定义修改文件名。
image.png

Namers插件使用方法如下:
.parcelrc文件中,添加namers字段,然后添加插件名称(必须要extends一个基础插件@parcel/config-default

/* .parcelrc */
{
  "extends": ["@parcel/config-default"],
  "namers": ["parcel-namer-hashless"]
}

四、使用parcel-namer-hashless插件去掉hash值

parcel-namer-hashless是1个无需多余配置,安装后即可在parcel打包文件后,去掉所有文件hash值的一个插件。

使用:
1.安装

npm install --save-dev parcel-namer-hashless

2.配置文件添加插件

/* .parcelrc */
{
  "extends": ["@parcel/config-default"],
  "namers": ["parcel-namer-hashless"]
}

3.如果打包的文件是index.html入口,在package.json中添加source字段

/* package.json */
{
  "source": "src/index.html"
}

4.如果你处于development模式中,插件不会去掉文件hash值,只会在build时去掉
5.当插件成功运行时,会在终端打印以下信息

parcel-namer-hashless: index.794a6267.js -> index.js

image.png

如果这个插件对你有帮助,欢迎star或提issue
https://github.com/gxy5202/pa...


前面的不止一端
专注前端和小程序,喜欢鼓捣各种天马行空,向全栈技术看齐
avatar
Gomi
Video Roll 作者

前端,业余PPT设计师

2.4k 声望
2.3k 粉丝
0 条评论
推荐阅读
三年前端的2022,如果创造比卷更有趣,那为何创造不能成为主旋律?
up主2019年毕业,找了一份前端工作,一直干到现在。2019年末出现疫情,三年的时间,也差不多与我的职业生涯完全重合了。刚过去的2022年,我也没有避开阳的命运(这病毒是真的强),就12月这一个月时间,几乎全公...

Gomi10阅读 2.3k

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
avatar
Gomi
Video Roll 作者

前端,业余PPT设计师

2.4k 声望
2.3k 粉丝
宣传栏