cd(): Surface the minified build as standard when importing and also provide a non bundled build

[asturur]

Description

I was looking at the bundle analyzer tool of one app and realized we are always importing the 900kb file
Also enabled source maps for everything.

Then i understood there is another option to build the files and that is by preserving the module import structure and renaming the outputs to .mjs so that the basic standard import commands can work

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

• Run Next Template
• Run Node Template
• Run Vanilla Template
• Run Vue Template

[github-actions]

Build Stats

file / KB (diff)	bundled	minified
fabric	907.298 (0)	304.487 (+0.037)

[asturur]

Need to hook it up to a real app to test differences, but seems the part i was missing in my head.

[asturur]

if this works as i want it to work we can add more files and simply not include them in fabric.ts but in a different ts file and have them available without influencing the core bundle

[asturur]

@ShaMan123 i have to test this, but this would allow to do something like:

import { Canvas, Text } from 'fabric/es'

And then your bundler would need to bundle only the stuff that is really necessary for the 2.

It wouldn't be as byte optimized as a tree shaking software that goes around the bundled build and chunks off pieces of code that are not needed, but in general would work

I have a small app in development so maybe tomorrow i m able to test this

[asturur]

This is fabricJS with the minified es build

While if i declare sideEffects false and load the /es/ imports:

i get an entirely different import size

[asturur]

Now this can't be the default of course because if i m using either svgImport or loadCanvasFromJson with an app that requires a shape, like Path that i m not requiring in my code, that is going to break the app.

So this this /es/ folder should be kept for experimentation or 'i know what i m doing' for now and node should be left to a bundled output

[github-actions]

Coverage after merging import-es-min into master will be

82.72%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
index.node.ts	14.29%	100%	0%	25%	23, 26, 29, 41, 44, 47
src
ClassRegistry.ts	100%	100%	100%	100%
Collection.ts	94.85%	94.83%	87.10%	97.14%	109, 112, 215–216, 241–242
CommonMethods.ts	96.55%	87.50%	100%	100%	9
Intersection.ts	100%	100%	100%	100%
Observable.ts	87.76%	85.29%	87.50%	89.58%	134–135, 160–161, 32–33, 41, 50, 78, 89
Point.ts	100%	100%	100%	100%
Shadow.ts	98.36%	95.65%	100%	100%	178
cache.ts	97.06%	90%	100%	100%	57
config.ts	74.14%	65%	66.67%	82.76%	131, 139, 139, 139, 139, 139–141, 152–154, 30
constants.ts	100%	100%	100%	100%
src/LayoutManager
LayoutManager.ts	87.50%	89.29%	76.92%	90%	133–134, 136–137, 137, 137, 137, 137, 231, 289–290, 301, 46
constants.ts	100%	100%	100%	100%
src/LayoutManager/LayoutStrategies
ClipPathLayout.ts	82.05%	72.22%	100%	88.89%	30–31, 42, 54, 57–58, 65
FitContentLayout.ts	100%	100%	100%	100%
FixedLayout.ts	20%	0%	0%	40%	20–21, 23, 23, 23, 23, 23
LayoutStrategy.ts	86%	64.71%	100%	96.15%	36, 43, 43, 43, 51, 71–72
utils.ts	91.67%	85.71%	100%	100%	28, 34
src/Pattern
Pattern.ts	90.54%	93.94%	80%	90.32%	119, 130, 139, 32, 36
src/brushes
BaseBrush.ts	100%	100%	100%	100%
CircleBrush.ts	0%	0%	0%	0%	108, 108, 108, 110, 112, 114–116, 118–121, 128–129, 13, 136, 138, 23–24, 32–36, 40–44, 51–54, 62–66, 68, 76, 76, 76, 76, 76–77, 79, 79, 79–82, 84, 92–93, 95, 97–99
PatternBrush.ts	97.06%	87.50%	100%	100%	21
PencilBrush.ts	91.06%	82.35%	100%	93.81%	122–123, 152, 152–154, 176, 176, 276, 280, 285–286, 68–69, 84–85
SprayBrush.ts	0%	0%	0%	0%	107, 107, 107, 107, 107–108, 110–111, 118–119, 121, 123–127, 136, 140–141, 141, 148, 148, 148–151, 153–156, 160–161, 163, 165–168, 17, 171, 178–179, 18, 181, 183–184, 186, 193–194, 196–197, 20, 200, 200, 207, 207, 21, 211, 22, 22, 22–24, 28, 32, 39, 46, 53, 60, 67, 84–86, 94–96, 98–99
src/canvas
Canvas.ts	78.66%	77.04%	82.14%	79.33%	1001–1003, 1006–1007, 1011–1012, 1123–1125, 1128–1129, 1202, 1314, 1435, 158, 183, 289, 289–294, 299, 322–323, 328–333, 353, 353, 353–354, 354, 354–355, 363, 368–369, 369, 369–370, 372, 381, 387–388, 388, 388, 42, 431, 439, 443, 443, 443–444, 446, 46, 528–529, 529, 529–530, 536, 536, 536–538, 558, 560, 560, 560–561, 561, 561, 564, 564, 564–565, 568, 577–578, 580–581, 583, 583–584, 586–587, 599–600, 600, 600–601, 603–608, 614, 621, 658, 658, 658, 660, 662–667, 673, 679, 679, 679–680, 682, 685, 690, 703, 731, 783–784, 784, 784, 784, 784, 784, 787–788, 791, 791–793, 796–797, 879, 886, 886, 886, 899, 928–929, 929, 929–931, 934–935, 935, 935, 937, 945, 945, 945–947, 947, 947, 954–955, 963–964, 964, 964–965, 971, 973
CanvasOptions.ts	100%	100%	100%	100%
SelectableCanvas.ts	90.22%	87.30%	94.55%	91.74%	1004, 1012, 1123, 1125, 1127–1128, 1199, 1220–1221, 1239–1240, 460–461, 463–464, 464, 464, 513–514, 591, 596, 666, 671–672, 699–700, 724, 727–730, 730, 730–731, 731, 731, 737–738, 740, 760–761, 766–770, 772, 807–808, 811, 811, 811–812, 931, 931–932, 935, 955, 955
StaticCanvas.ts	96.51%	93.04%	98.91%	98.28%	1014, 1024, 1075–1077, 1080, 1115–1116, 1192, 1201, 1201, 1205, 1205, 1252–1253, 179–180, 196, 554, 566–567, 897–898, 898, 898–899
StaticCanvasOptions.ts	100%	100%	100%	100%
TextEditingManager.ts	86%	71.43%	91.67%	91.67%	17, 17, 17–18, 18, 18
src/canvas/DOMManagers
CanvasDOMManager.ts	95.52%	70%	100%	100%	21–22, 29
StaticCanvasDOMManager.ts	97.50%	88.89%	100%	100%	33
util.ts	86.67%	80.56%	83.33%	93.94%	14, 26, 63–64, 67, 67, 74, 93–94
src/color
Color.ts	94.96%	91.67%	96.30%	96.05%	233, 258–259, 267–268, 48
color_map.ts	100%	100%	100%	100%
constants.ts	100%	100%	100%	100%
util.ts	85.71%	76.92%	100%	89.74%	55–56, 56, 58, 58, 58–59, 61–62, 89
src/controls
Control.ts	94.44%	93.10%	91.67%	96.77%	183, 249, 354
changeWidth.ts	100%	100%	100%	100%
commonControls.ts	100%	100%	100%	100%
controlRendering.ts	81.63%	78%	100%	84.78%	106, 111, 121, 121, 45, 50, 61, 61, 65–72, 81–82
drag.ts	100%	100%	100%	100%
fireEvent.ts	88.89%	75%	100%	100%	13
polyControl.ts	10.87%	0%	0%	16.13%	114, 114, 114, 114, 114, 116–119, 119, 122, 129, 24–26, 50–52, 58–59, 61, 71, 77–79, 79, 81, 84, 86, 90–92, 94, 99
rotate.ts	19.57%	12.50%	50%	21.43%	41, 45, 51, 51, 51–52, 55–57, 59, 59,

[ShaMan123]

Don't we want es to become the default export instead of the bundled one?

[asturur]

Don't we want es to become the default export instead of the bundled one?

Yes.
But we don't have a solution/guideline to explain how to work with generic data that you may import.

Probably the solution will be that utils like loadSVG will force import all classes, so that when you load them all the imports are resolved, and loadFromJSON instead of being a canvas method will be a util as well, so that when you trigger generic code you are forced to import all the dependencies.

This could leave freedom to people to not do that anyway by provide a clear UNSAFE_loadSVGFromString import if they know what they want to do.

The approximate goal is to be able to discard large chunks:

• all brushes
• all filters
• text
• canvas with interactivity

[ShaMan123]

I would even set a goal to make them subpackages @fabric/brushes etc.

[ShaMan123]

should not be minified so it seems

[asturur]

If there is something wrong with this change open a visible issue, comments on old PR have basically no visibility unless i m combing the emails one by one.

[jiayihu]

@asturur The non-minified build is basically never picked up. This should have been done like React, where it picks the correct one based on the ENV:

Forcing the minified build during development is just more painful for debugging. You can also reuse the same strategy to strip fabric's logs for the production build.

[ShaMan123]

And actually it breaks jest snapshots because class names are now mangled in the test

[asturur]

important is that production has the minified build, if you want top open a change to surface the non minified build in dev you can do it.
Surfacing non minified code in production seems as bad as minified in dev.

Regarding the affected test, what snapshot is it about?

[asturur]

lodash, redux, ships unminified, lottie player ships unminified. Those are random picks i made.
Important is that there is something for the browser inclusion that is still minified.

[jiayihu]

On a look at rollup.config.mjs, I don't know exactly who the fabric build system works so I'll leave the PR to you guys if you want to do it. Otherwise no problem, we can wait if someone else has issues. Internally at my workplace we've just patched package.json to continue using the unminified build.

[asturur]

But do sourcemaps works for you or not?

[jiayihu]

node_modules sourcemaps work fine for me with CRA, but not with Vite for some reason vitejs/vite#13391 (despite the issue being supposedly fixed but I'm not an expert with Vite).

[asturur]

I opened this PR because my VITE build was picking up the unminified code, so vite wasn't minifying anything for me