Content hash output file names #1025

devongovett · 2018-03-19T05:14:04Z

This implements the strategy described in #872. In production mode, a hash of bundle content is appended to names of files that aren't entry points (e.g. HTML files, things linked to a <a href>, service workers, etc.). Unhashed files retain their original name, and path relative to the main entry point.

In development mode, rather than using content hashes, the hash of the filename is used as before, so that filenames don't change during development. The hashes are necessary at all to avoid name collisions since the file structure is flattened. In addition, the filenames look more similar to the real production ones - the hashes just don't change.

It works by using a temporary filename (md5 of asset path) as references (which should be unique), and at the end, once file contents is known for all bundles, it replaces those temporary names with the real content-hashed names during packaging.

To do:

fix hashing of raw assets (which aren't in memory)
more unit tests
test in real world apps.

Please help me test! cc. @zeakd @songlipeng2003 @ssuman @Munter @benhutton @shanebo @leeching @gamebox @npup

Implements #872.

codecov-io · 2018-03-20T02:19:23Z

Codecov Report

Merging #1025 into master will decrease coverage by 0.04%.
The diff coverage is 92.68%.

@@            Coverage Diff             @@
##           master    #1025      +/-   ##
==========================================
- Coverage   89.27%   89.23%   -0.05%     
==========================================
  Files          69       70       +1     
  Lines        3393     3631     +238     
==========================================
+ Hits         3029     3240     +211     
- Misses        364      391      +27

Impacted Files	Coverage Δ
src/packagers/HTMLPackager.js	`97.5% <100%> (ø)`	⬆️
src/utils/md5.js	`100% <100%> (ø)`	⬆️
src/Bundle.js	`99.17% <100%> (+0.17%)`	⬆️
src/packagers/JSPackager.js	`90% <100%> (ø)`	⬆️
src/Asset.js	`100% <100%> (ø)`	⬆️
src/assets/RawAsset.js	`94.73% <100%> (+1.87%)`	⬆️
src/Bundler.js	`89.96% <100%> (+0.03%)`	⬆️
src/Server.js	`92.59% <100%> (+0.13%)`	⬆️
src/packagers/CSSPackager.js	`100% <100%> (ø)`	⬆️
src/packagers/Packager.js	`92.3% <100%> (+4.8%)`	⬆️
... and 27 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7f9c64...219ad7f. Read the comment docs.

jamiebuilds · 2018-03-20T17:28:06Z

This is a really nice way to do it, we should make a chart of the implications of the different ways to import resources:

Language	Syntax	Dynamic (possibly code split)	Public URL (keeps name)
JavaScript	`import 'x'`
JavaScript	`import('x')`	✅
JavaScript	`SW.register('x')`	✅	✅
HTML	`<iframe src="x"`	✅	✅
HTML	`<a href="x">`	✅	✅
CSS	`@import "x"`	✅

devongovett · 2018-03-20T17:58:37Z

iframes do not currently retain the filename (they are hashed) since they aren't linked to directly. do you think we should keep the name?

jamiebuilds · 2018-03-20T21:44:43Z

Hmm... Yeah, I think they should be. I would treat them as public resources that could be linked to elsewhere and not partials

jamiebuilds · 2018-03-21T17:06:22Z

🎉

TimNZ · 2018-03-28T08:41:55Z

LOVING the new filenames.
Along with simplifying cache busting deployment will make debugging easier.
Thanks!

rogeriochaves · 2018-03-31T23:14:09Z

is there any way to opt out of hashing at all? I'm currently building a browser extension, and I have to explicitly list every js I'll need to load on the manifest.json file, so I can't have filenames changing all the time

Includes the long-waited "Content hash output file names" parcel-bundler/parcel#1025

TheAlexPorter · 2018-04-12T05:11:26Z

I'm doing the same thing as @rogeriochaves . It would be nice to be able to turn off the hashing so that tools, like Chrome Extensions, get static names that don't change so we can manage them better.

felixrabe · 2018-04-27T06:09:09Z

@rogeriochaves @TheAlexPorter Please find or open an issue for this and mention it here. Thx!

denis1stomin · 2018-06-06T10:47:09Z

Hey guys,
I have a few questions for you regarding the strategy.
I have a folder somewhere inside my repo some/path/webui.
This folder contains standard package structure and src folder in it.
I moved index,html file into src folder since for me it is a source code.
(I'm a pro developer but really new in those all frontend things :))
Now when I run "npx parcel build" (production mode) or globally "parcel build" it produces a file like
dist/src.4320c2f6.html. Looks like it treats all src/* files like "aren't entry points".
For me it looks like a bug.
So the questions are:

Is it a bug for you and can it be easily fixed in future versions?
If it is "by design", how you'd describe (your vision) where html files should be places and why?

Thanks

DeMoorJasper · 2018-06-06T10:50:04Z

@denis1stomin html files are not content hashed if they are the entry-point or required from html. So not sure why this file is content hashed?

Feel free to open an issue, as you won't get much response on a merged PR

imWildCat · 2018-06-11T17:39:19Z

I really need the support for disabling hashing for a specific path, for example ./images/.

I am struggling to use parcel with lottie-web,

This way <a href="x"> does not support wildcard paths, such as <a href="./images/*">.

Currently I have to do this in a very ugly way:

        <a href="./images/img_0.png" />
        <a href="./images/img_1.png" />
        <a href="./images/img_2.png" />
        <a href="./images/img_3.png" />
        <a href="./images/img_4.png" />
        <a href="./images/img_5.png" />
        <a href="./images/img_6.png" />
        <a href="./images/img_7.png" />
        <a href="./images/img_8.png" />
        <a href="./images/img_9.png" />
        <a href="./images/img_10.png" />
        <a href="./images/img_11.png" />

micopiira · 2018-10-23T14:43:13Z

Would it be possible to hash the filenames when using a JS entrypoint?

For example: parcel build index.js test.js would createdist/index.da39a3.jsand a dist/test.ee5e6b.js, possibly with a JSON file containing the mappings

{
  "index.js": "dist/index.da39a3.js",
  "test.js": "dist/test.ee5e6b.js"
}

This feature would make working with a Maven/Java web project a lot easier (for me, atleast..)

LLe27 · 2019-05-16T20:09:29Z

Hey everyone,

I apologize if my question is not clear and concise. I am relatively new to the parceljs bundler and progressive web apps. I am currently trying to create an offline experience but I need to specify specific JS and CSS files that are needed for this experience in production. How do I, or how would I detect the exact filenames considering they are appended with hashes? This is needed for the cache file list for my service worker.

Thanks!

mischnic · 2019-05-16T20:23:30Z

@LLe27 Some options:

pass --no-content-hash to Parcel so that the hash stays constant (is only dependent on the path and not the content).
generate the Service worker cache list after building based on the actual output names

LLe27 · 2019-05-17T12:41:50Z

@mischnic

Thanks, i'll give this a try! Worse case i'll just implement the Workbox library.

EDIT: This method worked perfect!

joeosburn · 2020-06-02T17:48:18Z

@devongovett We've tested this and the bundle files do get updated with new filename hashes when their contents change. However, the entry file does not get updated to point to the newly hashed files.

devongovett added 2 commits March 18, 2018 21:58

Don’t clear in logger during the tests

8fb0d17

Content hash output file names

c260712

Implements #872.

devongovett added this to the v1.7.0 milestone Mar 19, 2018

devongovett mentioned this pull request Mar 19, 2018

[RFC] File naming strategy #872

Closed

davidnagli added the 📝 WIP Work In Progress label Mar 19, 2018

devongovett added 2 commits March 19, 2018 18:55

Fix content hashing for raw assets

409c3c2

Add tests for content hashing

219ad7f

devongovett changed the title ~~[WIP] Content hash output file names~~ Content hash output file names Mar 20, 2018

devongovett requested review from DeMoorJasper and brandon93s March 20, 2018 02:05

devongovett mentioned this pull request Mar 20, 2018

WIP: Content-hash bundle names #829

Closed

devongovett removed the 📝 WIP Work In Progress label Mar 20, 2018

Don’t hash iframe src

c66efa6

devongovett merged commit 76fa1ed into master Mar 21, 2018

devongovett deleted the content-hash branch March 21, 2018 02:46

DeMoorJasper mentioned this pull request Mar 22, 2018

Stop Parcel from renaming files #1045

Closed

devongovett mentioned this pull request Mar 22, 2018

production build cache busting #1046

Closed

davidnagli mentioned this pull request Mar 22, 2018

Document Parcel v1.7.0 features parcel-bundler/website#132

Closed

3 tasks

devongovett mentioned this pull request Mar 26, 2018

Fix HMR with content hashing changes #1071

Merged

danr pushed a commit to spraakbanken/swell-editor that referenced this pull request Apr 5, 2018

Update dependencies

e3830be

Includes the long-waited "Content hash output file names" parcel-bundler/parcel#1025

bvandorn mentioned this pull request May 9, 2018

Dynamically Imported Files Do Not Update Built Entry Hash #1339

Closed

bard mentioned this pull request May 31, 2018

webmanifest name mangling breaks PWA updates #1466

Closed

denis1stomin mentioned this pull request Jun 6, 2018

html file is produced with strange name (content hash etc) when it is placed inside src folder #1500

Closed

DeMoorJasper mentioned this pull request Jul 5, 2018

Add filename strategy doc parcel-bundler/website#195

Merged

bre7 mentioned this pull request Aug 21, 2018

Treat image set as href target as an asset instead of entry point #1917

Open

devongovett added a commit that referenced this pull request Oct 15, 2018

Content hash output file names (#1025)

5fe1e28

devongovett added a commit that referenced this pull request Oct 15, 2018

Content hash output file names (#1025)

70b73ed

kirillrogovoy mentioned this pull request Dec 27, 2018

Parcel does not keep file extension when creating source maps #2460

Closed

joeosburn mentioned this pull request Jun 3, 2020

Add option to enable content hashing when in watch mode #4684

Closed

rvalentini mentioned this pull request Oct 12, 2021

Properly set Cache-Control headers cljdoc/cljdoc#181

Closed

schlichtanders mentioned this pull request Apr 25, 2023

Keep folder structure and filename 2 #8963

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content hash output file names #1025

Content hash output file names #1025

devongovett commented Mar 19, 2018 •

edited

Loading

codecov-io commented Mar 20, 2018 •

edited

Loading

jamiebuilds commented Mar 20, 2018

devongovett commented Mar 20, 2018

jamiebuilds commented Mar 20, 2018

jamiebuilds commented Mar 21, 2018

TimNZ commented Mar 28, 2018

rogeriochaves commented Mar 31, 2018

TheAlexPorter commented Apr 12, 2018

felixrabe commented Apr 27, 2018

denis1stomin commented Jun 6, 2018

DeMoorJasper commented Jun 6, 2018 •

edited

Loading

imWildCat commented Jun 11, 2018

micopiira commented Oct 23, 2018

LLe27 commented May 16, 2019

mischnic commented May 16, 2019

LLe27 commented May 17, 2019 •

edited

Loading

joeosburn commented Jun 2, 2020

Content hash output file names #1025

Content hash output file names #1025

Conversation

devongovett commented Mar 19, 2018 • edited Loading

codecov-io commented Mar 20, 2018 • edited Loading

Codecov Report

jamiebuilds commented Mar 20, 2018

devongovett commented Mar 20, 2018

jamiebuilds commented Mar 20, 2018

jamiebuilds commented Mar 21, 2018

TimNZ commented Mar 28, 2018

rogeriochaves commented Mar 31, 2018

TheAlexPorter commented Apr 12, 2018

felixrabe commented Apr 27, 2018

denis1stomin commented Jun 6, 2018

DeMoorJasper commented Jun 6, 2018 • edited Loading

imWildCat commented Jun 11, 2018

micopiira commented Oct 23, 2018

LLe27 commented May 16, 2019

mischnic commented May 16, 2019

LLe27 commented May 17, 2019 • edited Loading

joeosburn commented Jun 2, 2020

devongovett commented Mar 19, 2018 •

edited

Loading

codecov-io commented Mar 20, 2018 •

edited

Loading

DeMoorJasper commented Jun 6, 2018 •

edited

Loading

LLe27 commented May 17, 2019 •

edited

Loading