Allow direct imports to reduce bundle size. #2893

ruiaraujo · 2017-05-06T15:50:48Z

Webpack 2 does not remove a lot of unused modules from my bundle so direct import remain the best solution to reduce bundle size.

The doc page was heavily inspired by https://github.com/ReactTraining/react-router/blob/v3/docs/guides/MinimizingBundleSize.md

codecov-io · 2017-05-06T16:02:17Z

Codecov Report

Merging #2893 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           master   #2893   +/-   ##
======================================
  Coverage     100%    100%           
======================================
  Files          68      67    -1     
  Lines        1404    1407    +3     
======================================
+ Hits         1404    1407    +3

Impacted Files	Coverage Δ
src/createFieldArray.js	`100% <100%> (ø)`
src/createReduxForm.js	`100% <100%> (ø)`
src/createFormValueSelector.js	`100% <100%> (ø)`
src/createValues.js	`100% <100%> (ø)`
src/createFields.js	`100% <100%> (ø)`
src/immutable.js	`100% <100%> (ø)`	⬆️
src/createField.js	`100% <100%> (ø)`
src/index.js	`100% <100%> (ø)`	⬆️
src/createReducer.js	`100% <100%> (ø)`
... and 6 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 cda2572...f83c9af. Read the comment docs.

gustavohenke · 2017-05-06T18:04:33Z

Can you check #2315, please?
Over there guys think the bundle size problem is related to lodash.

BTW, what a huge PR!

ruiaraujo · 2017-05-06T18:12:46Z

For me since I was also using lodash, it is shared so that is not a problem. The problem was the factory index files that prevented direct imports.

erikras · 2017-05-07T22:16:16Z

Wow! That's an impressive PR!

Well done. Thank you for your time.

erikras · 2017-05-08T12:49:45Z

docs/faq/BundleSize.md

+
+Use `es` if you are using a bundler that can process ES modules like `webpack@2` or `rollup`, otherwise use `lib`.
+
+The public API available in this manner is defined as the set of imports available from the top-level `react-router` module.


Oops. Missed a react-router. 😛

god dammit. Do you fix it or should I?

Next time I 'inspire' myself on the work of others, do cmd+R. 10 year old me would not have done this kind of mistake. 😃

Fixed in #2898

erikras · 2017-05-08T13:10:50Z

@ruiaraujo Is there some advantage to doing

import { default as Foo } from './somedir/Foo'

over

import Foo from './somedir/Foo'

??

The latter is less explicit, but much more readable, in my opinion.

erikras · 2017-05-08T13:19:50Z

Oops, nevermind. They are EXPORT statements. There, now we've both made absentminded mistakes on this PR. :-)

* Add PropTypes for the Field components * Export fieldInputPropTypes, fieldMetaPropTypes and fieldPropTypes * Merged with changes from #2893

* Exports defaultShouldValidate and defaultShouldAsyncValidate These default functions are exported for external use - particularly so that a user can wrap the default functionality with specialised behaviour. To resolve #2890 * Export default shouldValidates in immutable wrapper * Allow direct imports to reduce bundle size. (#2893) * Fix deep equal on maps with different structures (#2892) * Remove references to react-router from doc page. (#2898) * Add PropTypes for the Field components (#2862) * Add PropTypes for the Field components * Export fieldInputPropTypes, fieldMetaPropTypes and fieldPropTypes * Merged with changes from #2893

erikras · 2017-05-08T16:52:08Z

Ugh. ☹️ In retrospect, you really should have git mv'd reduxForm.js to createReduxForm.js, and then created a new reduxForm.js, as this PR has wiped all annotation history from the file, since all the complex code now exists in a brand new file. Oh well... live and learn...

(I probably would not have thought to do this either. I'm just only realizing this in retrospect.)

ruiaraujo · 2017-05-08T16:57:24Z

Hmm, does git mv actually help with that problem? git mv is just a mv + git add which was what I did.

…

On Mon, May 8, 2017 at 6:52 PM Erik Rasmussen ***@***.***> wrote: Ugh. ☹️ In retrospect, you really should have git mv'd reduxForm.js to createReduxForm.js, and then created a new reduxForm.js, as this PR has wiped all annotation history from the file, since all the complex code now exists in a brand new file. Oh well... live and learn... (I probably would not have thought to do this either. I'm just only realizing this in retrospect.) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2893 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASi2VlvUXP-_lr6YzvgmYa9T274gZ4vks5r30g9gaJpZM4NSz2A> .

erikras · 2017-05-08T17:02:46Z

Hmm... So it is. I was under the impression that it would preserve the history of the file. I swear I've seen it do that before. Perhaps it only works if you don't immediately add another file with the old name...? Oh well.

Nevermind then. 😄

gajus · 2017-05-08T19:34:59Z

Is there a timeline for this getting released. :-) ?

gajus · 2017-05-08T19:38:04Z

docs/faq/BundleSize.md

+    }
+```
+
+##Caveat (Action Creators)


From the documentation, it is not clear whether this step is automated by babel-plugin-transform-imports or do I still need to use react-router/es/actions when using the plugin.

I will try to be more explicit about the problem then.

LOL, even the follow-up question didn't notice the wrong library name. 😆

…ializing the form (#2835) * passing the last initialValues into initialize action if it is reinitializing the form * Added test related to #2809 * Removed meta.touched from FieldArray props (#2836) * Add props to the params documented in the field-level validations example (#2855) * Fix typo in docs/api/Field.md (#2864) * Improve SubmissionError docs (#2873) * Add a selector to get touched and visited props from state (#2859) * added a selector (getFormMeta) which retrieves the form.{$name}.fields slice from state * added documentation for getFormMeta selector * Fixed field-level validation reset bug (#2888) * deleteInWithCleanUp needs to check if there is a value in the state before deleting. (#2876) * deleteInWithCleanUp needs to check if there is a value in the state before deleting, to avoid Invalid KeyPath errors * Got rid of string compare * clean script - added es folder to be rimrafed before build (#2860) * Add a Field's initial value to props.meta.initial (#2858) * Add meta.initial to Field props for access to a field’s initial value. * es6 typo * add meta.initial to the docs for Field * Demonstrated that calling onBlur() does not change value #2768 * Better cleanup on UNREGISTER (#2889) * Checkbox default behavior proposal (#2863) instead true/false to be true/'' as the current true/false breaks pristine prop * Fancy new npm5 lock file! * Allow direct imports to reduce bundle size. (#2893) * Fix deep equal on maps with different structures (#2892) * Remove references to react-router from doc page. (#2898) * Add PropTypes for the Field components (#2862) * Add PropTypes for the Field components * Export fieldInputPropTypes, fieldMetaPropTypes and fieldPropTypes * Merged with changes from #2893 * Exports defaultShouldValidate and defaultShouldAsyncValidate (#2891) * Exports defaultShouldValidate and defaultShouldAsyncValidate These default functions are exported for external use - particularly so that a user can wrap the default functionality with specialised behaviour. To resolve #2890 * Export default shouldValidates in immutable wrapper * Allow direct imports to reduce bundle size. (#2893) * Fix deep equal on maps with different structures (#2892) * Remove references to react-router from doc page. (#2898) * Add PropTypes for the Field components (#2862) * Add PropTypes for the Field components * Export fieldInputPropTypes, fieldMetaPropTypes and fieldPropTypes * Merged with changes from #2893

erikras · 2017-05-09T21:02:30Z

Published as v6.7.0.

piuccio · 2017-05-11T07:25:27Z

Interesting PR, two minor things

You need a space in the markdown after ##, currently it looks like in the picture above
There's no mention on how to use this together with immutable.js

ruiaraujo · 2017-05-11T07:35:13Z

@piuccio It is the same thing to use it with immutable, just add immutable.

piuccio · 2017-05-11T08:55:07Z

just add immutable

where?

redux-form/es/whatever/immutable
redux-form/es/immutable/whatever

I suppose it's the first one, but it would be nice to have it in the doc

timhwang21 · 2017-05-11T14:21:16Z

Hi, I'm noticing that the Babel plugin doesn't work well with actions:

WARNING in ./src/foo/bar.js
23:23-30 "export 'default' (imported as 'actions') was not found in 'redux-form/es/actions'

My import:

import { actions, Field, reduxForm } from 'redux-form';
const { reset } = actions;

This can be worked around from the user's end by changing the import statement, but I was wondering if it would be a good idea to add a default export to es/actions that contains all the actions. I think the import pattern I'm using is fairly standard, and the change would help users optimize their bundles with minimal refactoring.

Alternatively, if this is happening because I'm doing something wrong, please let me know. Thanks!

brneto · 2018-05-08T10:46:24Z

@erikras What are that createValues.js and values.js? Why it's not documented? Can I use it do access the form field values or you plan to remove that on the future?

lock · 2018-06-07T11:41:49Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Allow direct imports to reduce bundle size.

f83c9af

erikras merged commit ff213e8 into redux-form:master May 7, 2017

ruiaraujo deleted the smallerBundle branch May 8, 2017 08:02

erikras reviewed May 8, 2017

View reviewed changes

erikras added a commit that referenced this pull request May 8, 2017

Merged with changes from #2893

0ef3081

erikras pushed a commit that referenced this pull request May 8, 2017

Add PropTypes for the Field components (#2862)

2dbd841

* Add PropTypes for the Field components * Export fieldInputPropTypes, fieldMetaPropTypes and fieldPropTypes * Merged with changes from #2893

erikras added a commit that referenced this pull request May 8, 2017

Merged with changes from #2893

0106f01

gajus reviewed May 8, 2017

View reviewed changes

erikras added a commit to sckoh/redux-form that referenced this pull request May 9, 2017

Merged with changes from redux-form#2893

fc6fabe

lock bot locked as resolved and limited conversation to collaborators Jun 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow direct imports to reduce bundle size. #2893

Allow direct imports to reduce bundle size. #2893

ruiaraujo commented May 6, 2017 •

edited

codecov-io commented May 6, 2017

gustavohenke commented May 6, 2017

ruiaraujo commented May 6, 2017

erikras commented May 7, 2017

erikras May 8, 2017

ruiaraujo May 8, 2017

ruiaraujo May 8, 2017

ruiaraujo May 8, 2017

erikras commented May 8, 2017

erikras commented May 8, 2017

erikras commented May 8, 2017

ruiaraujo commented May 8, 2017 via email

erikras commented May 8, 2017

gajus commented May 8, 2017

gajus May 8, 2017

ruiaraujo May 8, 2017

erikras May 8, 2017

erikras commented May 9, 2017

piuccio commented May 11, 2017

ruiaraujo commented May 11, 2017

piuccio commented May 11, 2017

timhwang21 commented May 11, 2017

brneto commented May 8, 2018 •

edited

lock bot commented Jun 7, 2018


		Use `es` if you are using a bundler that can process ES modules like `webpack@2` or `rollup`, otherwise use `lib`.

		The public API available in this manner is defined as the set of imports available from the top-level `react-router` module.

Allow direct imports to reduce bundle size. #2893

Allow direct imports to reduce bundle size. #2893

Conversation

ruiaraujo commented May 6, 2017 • edited

codecov-io commented May 6, 2017

Codecov Report

gustavohenke commented May 6, 2017

ruiaraujo commented May 6, 2017

erikras commented May 7, 2017

erikras May 8, 2017

Choose a reason for hiding this comment

ruiaraujo May 8, 2017

Choose a reason for hiding this comment

ruiaraujo May 8, 2017

Choose a reason for hiding this comment

ruiaraujo May 8, 2017

Choose a reason for hiding this comment

erikras commented May 8, 2017

erikras commented May 8, 2017

erikras commented May 8, 2017

ruiaraujo commented May 8, 2017 via email

erikras commented May 8, 2017

gajus commented May 8, 2017

gajus May 8, 2017

Choose a reason for hiding this comment

ruiaraujo May 8, 2017

Choose a reason for hiding this comment

erikras May 8, 2017

Choose a reason for hiding this comment

erikras commented May 9, 2017

piuccio commented May 11, 2017

ruiaraujo commented May 11, 2017

piuccio commented May 11, 2017

timhwang21 commented May 11, 2017

brneto commented May 8, 2018 • edited

lock bot commented Jun 7, 2018

ruiaraujo commented May 6, 2017 •

edited

brneto commented May 8, 2018 •

edited