Make CanJS's Core < 50 kB

justinbmeyer commented 6 years ago

TLDR: We should make it possible to use CanJS (can-component, can-stache, can-define/map/map, can-define/list/list) while adding less than 50 kB to the size of an app (minified + gzipped).

This was discussed on a recent live stream (16:47), with follow-up discussion at 48:14.

Description

can-component and its dependencies built, minified, and gzipped is somewhere between 100 kB and 200 kB (depending how you measure).

We should make it less than 50 kB.

Details

There are many things that could be done to accomplish this goal. They are discussed in the following sections.

Remove redundant code

There are some modules that have been extracted out to their own module:

can-view-live/lib/patcher -> can-diff/patcher

And some that are just wrappers around other modules to preserve APIs:

can-util/js/is-promise/is-promise.js -> canReflect.isPromise

Remove development-only code

We have some code that is not cleaned up as much as it could be in production-mode:

can-log/dev/dev
can-reflect-dependencies

Move optional things to plugins

Make some helpers optional:

joinURI()
can-parse-uri
some of can-stache/helpers/core

Make events a plugin:

can-control
can-component/control/control

Make value a plugin:

can-simple-observable/resolver/resolver

Make IE 11 support optional:

can-symbol

Other:

can-event-dom-radiochange
can-stache-ast
can-import-module

Use Symbols Directly

These moduels can be removed if we use the Symbols directly:

can-view-model
can-dom-data-state

Optimize other code for size

There are other modules that we can optimize for size. Such as replacing can-view-parsers internals with can-parse and removing cloneNode from can-view-target.

Create tests to confirm we stay under the 50 kB quota

Once we get under 50 kB, we should write a test to make sure we stay there.

justinbmeyer commented 6 years ago

Things loading twice:

698 can-view-live@4.1.0#lib/patcher - should be can-diff/patcher

Things that should probably be a no-op (0kb):

[X] - 'can-types' - shouldn't be used anymore
can-log/dev/dev
can-reflect-dependencies - 1549

Things we could probably move into their own plugins that are not loaded by default:

joinURI() helper - 305 can-parse-uri; and some of 1848 can-stache@4.5.0#helpers/core
can-view-model 385; 547 'can-dom-data-state' - make can-component use the symbol, not needed by default
can-event-dom-radiochange - 650
[X] can-cid - 735 - removed use of Set ... probably overkill for can-dom-data-state and can-single-reference
964 can-stache-ast; 312 'can-import-module' - this is only needed by stache.async which really is only needed by steal-stache
can-control 1960; can-component@4.1.0#control/control 477 - make it a plugin to components, not in components by default
1171 can-simple-observable@2.0.4#resolver/resolver

Things we could eliminate or reduce if we didn't plan on supporting IE11:

can-symbol 588

Things we could make lighter:

can-view-parser - 2329 (use can-parse)
can-dom-mutate@1.0.4#can-dom-mutate - feels a little large at 1497
2284 can-reflect@1.16.2#reflections/shape/shape
1471 can-define@2.3.1#map/map
2880 can-define@2.3.1#list/list
3708 can-define@2.3.1#can-define
1362 'can-view-target' - remove cloneNodes issue

phillipskevin commented 6 years ago

Justin's original issue description:

I'd like to reduce can-component to about 50k. Here's a breakdown of it's current dependencies:

74 'can-namespace'
102 'can-assign'
128 'can'
179 'can-string-to-any'
189 'can-define-lazy-value'
190 'can-stache-helpers'
202 'can-child-nodes'
209 'can-single-reference'
305 'can-parse-uri'
312 'can-import-module'
360 'can-dom-data'
385 'can-view-model'
387 'can-string'
397 'can-join-uris'
430 'can-types'
451 'can-key'
       216 can-key@0.5.0#utils
       235 can-key@0.5.0#get/get
515 'can-log'
       254 can-log@1.0.0#dev/dev
       261 can-log@1.0.0#can-log
547 'can-dom-data-state'
588 'can-symbol'
606 'can-diff'
650 'can-event-dom-radiochange'
652 'can-observation-recorder'
721 'can-simple-map'
735 'can-cid'
       116 can-cid@1.1.2#helpers
       298 can-cid@1.1.2#can-cid
       321 can-cid@1.1.2#set/set
785 'can-reflect-promise'
791 'can-fragment'
964 'can-construct'
964 'can-stache-ast'
       439 can-stache-ast@1.0.0#controls
       525 can-stache-ast@1.0.0#can-stache-ast
970 'can-key-tree'
986 'can-view-nodelist'
1165 'can-data-types'
       253 can-data-types@0.1.1#maybe-number/maybe-number
       254 can-data-types@0.1.1#maybe-string/maybe-string
       269 can-data-types@0.1.1#maybe-boolean/maybe-boolean
       389 can-data-types@0.1.1#maybe-date/maybe-date
1210 'can-attribute-encoder'
1212 'can-view-callbacks'
1362 'can-view-target'
1427 'can-stache-key'
1549 'can-reflect-dependencies'
       110 can-reflect-dependencies@1.0.2#src/is-function
       214 can-reflect-dependencies@1.0.2#can-reflect-dependencies
       316 can-reflect-dependencies@1.0.2#src/delete-mutated-by
       374 can-reflect-dependencies@1.0.2#src/add-mutated-by
       535 can-reflect-dependencies@1.0.2#src/get-dependency-data-of
1773 'can-observation'
       234 can-observation@4.0.1#temporarily-bind
       388 can-observation@4.0.1#recorder-dependency-helpers
       1151 can-observation@4.0.1#can-observation
1960 'can-control'
1988 'can-dom-events'
       359 can-dom-events@1.2.0#helpers/make-event-registry
       452 can-dom-events@1.2.0#can-dom-events
       505 can-dom-events@1.2.0#helpers/-make-delegate-event-tree
       672 can-dom-events@1.2.0#helpers/util
2329 'can-view-parser'
2353 'can-queues'
       92 can-queues@1.1.0#queue-state
       284 can-queues@1.1.0#completion-queue
       399 can-queues@1.1.0#queue
       723 can-queues@1.1.0#priority-queue
       855 can-queues@1.1.0#can-queues
2364 'can-component'
       477 can-component@4.1.0#control/control
       1887 can-component@4.1.0#can-component
2653 'can-dom-mutate'
       563 can-dom-mutate@1.0.4#-util
       593 can-dom-mutate@1.0.4#node
       1497 can-dom-mutate@1.0.4#can-dom-mutate
2896 'can-event-queue'
       268 can-event-queue@1.0.1#dependency-record/merge
       466 can-event-queue@1.0.1#type/type
       537 can-event-queue@1.0.1#value/value
       1625 can-event-queue@1.0.1#map/map
3104 'can-globals'
       205 can-globals@1.1.1#document/document
       209 can-globals@1.1.1#location/location
       214 can-globals@1.1.1#custom-elements/custom-elements
       223 can-globals@1.1.1#is-node/is-node
       231 can-globals@1.1.1#can-globals-instance
       237 can-globals@1.1.1#mutation-observer/mutation-observer
       245 can-globals@1.1.1#can-globals
       257 can-globals@1.1.1#is-browser-window/is-browser-window
       266 can-globals@1.1.1#global/global
       329 can-globals@1.1.1#base-url/base-url
       688 can-globals@1.1.1#can-globals-proto
3223 'can-simple-observable'
       138 can-simple-observable@2.0.4#log
       330 can-simple-observable@2.0.4#setter/setter
       368 can-simple-observable@2.0.4#can-simple-observable
       542 can-simple-observable@2.0.4#async/async
       674 can-simple-observable@2.0.4#settable/settable
       1171 can-simple-observable@2.0.4#resolver/resolver
3370 'can-stache-bindings'
3770 'can-attribute-observable'
       267 can-attribute-observable@0.2.3#get-event-name
       278 can-attribute-observable@0.2.3#event
       957 can-attribute-observable@0.2.3#can-attribute-observable
       2268 can-attribute-observable@0.2.3#behaviors
4694 'can-view-scope'
       162 can-view-scope@4.3.0#compute_data
       166 can-view-scope@4.3.0#template-context
       441 can-view-scope@4.3.0#make-compute-like
       1241 can-view-scope@4.3.0#scope-key-data
       2684 can-view-scope@4.3.0#can-view-scope
5038 'can-view-live'
       160 can-view-live@4.1.0#can-view-live
       244 can-view-live@4.1.0#lib/set-observable
       293 can-view-live@4.1.0#lib/attr
       425 can-view-live@4.1.0#lib/text
       509 can-view-live@4.1.0#lib/attrs
       523 can-view-live@4.1.0#lib/html
       612 can-view-live@4.1.0#lib/core
       698 can-view-live@4.1.0#lib/patcher
       1574 can-view-live@4.1.0#lib/list
7513 'can-reflect'
       283 can-reflect@1.16.2#reflections/call/call
       286 can-reflect@1.16.2#can-reflect
       309 can-reflect@1.16.2#reflections/helpers
       362 can-reflect@1.16.2#reflections/get-name/get-name
       411 can-reflect@1.16.2#types/map
       419 can-reflect@1.16.2#types/set
       655 can-reflect@1.16.2#reflections/get-set/get-set
       758 can-reflect@1.16.2#reflections/observe/observe
       772 can-reflect@1.16.2#reflections/shape/schema/schema
       974 can-reflect@1.16.2#reflections/type/type
       2284 can-reflect@1.16.2#reflections/shape/shape
8810 'can-define'
       178 can-define@2.3.1#ensure-meta
       573 can-define@2.3.1#define-helpers/define-helpers
       1471 can-define@2.3.1#map/map
       2880 can-define@2.3.1#list/list
       3708 can-define@2.3.1#can-define
14581 'can-stache'
       99 can-stache@4.5.0#src/set-identifier
       131 can-stache@4.5.0#expressions/literal
       166 can-stache@4.5.0#expressions/arg
       168 can-stache@4.5.0#src/truthy-observable
       221 can-stache@4.5.0#helpers/-debugger
       238 can-stache@4.5.0#src/key-observable
       255 can-stache@4.5.0#expressions/bracket
       302 can-stache@4.5.0#expressions/lookup
       329 can-stache@4.5.0#helpers/converter
       339 can-stache@4.5.0#expressions/hashes
       542 can-stache@4.5.0#src/expression-helpers
       612 can-stache@4.5.0#expressions/helper
       671 can-stache@4.5.0#src/text_section
       727 can-stache@4.5.0#expressions/call
       774 can-stache@4.5.0#src/utils
       1065 can-stache@4.5.0#src/html_section
       1841 can-stache@4.5.0#src/mustache_core
       1848 can-stache@4.5.0#helpers/core
       2058 can-stache@4.5.0#can-stache
       2195 can-stache@4.5.0#src/expression

There are 143 different modules totaling 95k. There's a minimum of 74b per module. The modules add 10k to the actual code.

canjs / can-component