Add custom webpack loader to remove unused mimetypes from mime-db

[absidue]

Add custom webpack loader to remove unused mimetypes from mime-db

Pull Request Type

• Other - Build optimization

Description

To be able to offer it's Save xyz As... context menu entries electron-context-menu needs to know what file extension it needs to give to the downloaded files, which is a bit difficult as web uses mime types/media types instead of file extensions. That's where mime-db comes in, it's a gigantic list of mime types and their file extensions where they are known.

As mentioned in the previous paragragh that list is gigantic (see it for yourself: https://github.com/jshttp/mime-db/blob/master/db.json) and takes up more than half of the main.js file's file size. So I set about to rectify that (well I've known about it for a while now, but I've only just come up with a good solution for it). As we only use the Save Image As... context menu entry, we only need the image ones, which already gets rid of a large number of them, we can also get rid of some non-standard ones.

The new webpack loader only takes a few milliseconds to run on my machine, to take the mime-db module from 143 KiB to 1.98 KiB, so low impact on the build time but high impact on the file size.

All that means that the main.js file went from being 247 KiB to 106 KiB!!!

Screenshots

Extracts from the webpack build log for the main.js file.

Before:

built modules 415 KiB [built]
  modules by path ./ 415 KiB
    modules by path ./node_modules/@seald-io/ 146 KiB 16 modules
    modules by path ./node_modules/mime-db/ 143 KiB 2 modules
    modules by path ./node_modules/sort-keys/ 1.02 KiB 2 modules
    + 4 modules

After:

built modules 274 KiB [built]
  modules by path ./ 274 KiB
    modules by path ./node_modules/@seald-io/ 146 KiB 16 modules
    modules by path ./node_modules/mime-db/ 1.98 KiB 2 modules
    modules by path ./node_modules/sort-keys/ 1.02 KiB 2 modules
    + 4 modules

Testing

1. yarn run pack
2. Look at the size of dist/main.js

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: 11a61d2

[PikachuEXE]

Just make it easier to read
Coz the logic seems to be

1. Add all image/ MIME types not matching specific prefixes with extensions
2. Add specific MIME types

Suggested change

	if (mimeType.startsWith('image/') && original[mimeType].extensions &&
	(!mimeType.startsWith('image/x-') || mimeType === 'image/x-icon' || mimeType === 'image/x-ms-bmp') &&
	(!mimeType.startsWith('image/vnd.') || mimeType === 'image/vnd.microsoft.icon')) {
	// Only the extensions field is needed, see: https://github.com/kevva/ext-list/blob/v2.2.2/index.js
	reduced[mimeType] = {
	extensions: original[mimeType].extensions
	}
	}
	if (!mimeType.startsWith('image/')) { continue }
	if (original[mimeType].extensions == null) { continue }
	let shouldBeAdded = false
	if (!mimeType.startsWith('image/x-') && !mimeType.startsWith('image/vnd.')) {
	shouldBeAdded = true
	} else {
	shouldBeAdded = mimeType === 'image/x-icon' ||
	mimeType === 'image/x-ms-bmp' ||
	mimeType === 'image/vnd.microsoft.icon'
	}
	if (!shouldBeAdded) { continue }
	// Only the extensions field is needed, see: https://github.com/kevva/ext-list/blob/v2.2.2/index.js
	reduced[mimeType] = {
	extensions: original[mimeType].extensions
	}

[efb4f5ff-1298-471a-8973-3d47447115dc]

Current code is easier to read imo

[absidue]

I agree with @efb4f5ff-1298-471a-8973-3d47447115dc I think the current code is more readable, also your code changes the logic, resulting in a different output.

I prefer the or/|| operator over writing lots of single line ifs that have the same outcome, as to me it's a lot more readable, especially when the variable names are short.

[absidue]

I agree with @efb4f5ff-1298-471a-8973-3d47447115dc I think the current code is more readable, also your code changes the logic, resulting in a different output.

I prefer the or/|| operator over writing lots of single line ifs that have the same outcome, as to me it's a lot more readable, especially when the variable names are short.

Also we really don't need to check for null here, as this code runs on a json file with a known structure so the only options are non-existent/undefined or an array, so checking for loose equality with null is rather confusing. Also the truthy check already covers both undefined and null.

[PikachuEXE]

This file won't be changed frequently so it's fine

[absidue]

This file won't be changed frequently so it's fine

Even if it were going to get frequent changes, using a more verbose, less readable code style, that is also less efficient, would still be a bad idea in my book.