Comments (17)
Does webpack supports modules.root
field? Rollup does not support it. And won't. There's enough proposals for esm. It's better to use existing popular solutions which work well than inventing new one every week.
And this is not treeshaking import State from 'react-powerplug/State.js'
. You may call it cherry picking.
Treeshaking is static analyses which allows to introduce only necessary modules from a set of exports, not files. Cherry-picking doesn't solve the problem. It completely omit technology just because you don't believe in it.
Treeshaking works, even better with flat bundles because you can see problems before they will go in user bundle. I created a tool to test treeshakability.
from react-powerplug.
And this library is not only for prototyping. It's designed to help building apps with simple functions. Dozens of our components use it in production.
from react-powerplug.
Well shoot, I'm now having trouble finding concrete documentation of whether Webpack supports modules.root
, though I don't think I would have wound up believing it does unless I found that somewhere...I'll check on that and get back to you.
Cherry-picking doesn't solve the problem. It completely omit technology just because you don't believe in it.
In packages that do publish multiple modules, I think the advantage of cherry picking with a Webpack build is that if I import {Foo} from 'bar'
, even if Webpack does tree shaking, it still includes that small amount of code from bar/index.js
that imports and re-exports the default from bar/Foo.js
, as well as module wrapper functions for both bar/index.js
and bar/Foo.js
. Whereas import Foo from 'bar/Foo.js'
doesn't include the re-export code or module wrapper function for bar/index.js
Obviously this wouldn't be an issue for importing from a rollup bundle.
from react-powerplug.
Yep, that's the point of using rollup. It produces clean and readable output which even does not require sourcemaps.
from react-powerplug.
@TrySound it does still support sourcemaps though if I want to use them right? For instance I would find it handy to be able to navigate to the sourcemapped react-powerplug/src/Toggle.js
in the browser.
from react-powerplug.
Do you know for sure if Webpack code splitting works well on rollup bundles? Please don't take my skepticism as being anti-rollup, I just want to make sure that I can meet all my goals using Webpack to build my app when there are rollup packages in my dependencies.
For instance if my chunk A does import {Toggle} from 'react-powerplug'
and my chunk B does import {Interval} from 'react-powerplug'
, will webpack put only the code for Toggle
in chunk A and only the code for Interval
in chunk B? I would be worried that Toggle
and Interval
would both wind up together in a third chunk, but hopefully webpack is smart enough to output two different tree-shakings of the same module...
from react-powerplug.
Yep, webpack includes both Toggle and Value in both bundles. It's webpack bug.
from react-powerplug.
Looks like it, I was experimenting with their optimization settings like mergeDuplicateChunks: false
but haven't found anything that affected the output. I'll file an issue in webpack
from react-powerplug.
It could definitely be because webpack decided the amount of code was so small that it wasn't worth splitting into separate chunks, but I need to get a definitive answer from the webpack team.
from react-powerplug.
from react-powerplug.
Actually which version of we pack are you using?
For me it included both Toggle
and Interval
in one chunk, not both chunks. (But as I mentioned, what I really want is for it to include Toggle
in one chunk and Interval
in the other.)
from react-powerplug.
In the latest version I get both toggle and interval included in both chunks. That I meant as webpack bug.
from react-powerplug.
One chunk have both exports and another one too.
from react-powerplug.
Do you mind sharing your test code?
from react-powerplug.
// src/index.js
import('./chunk1.js')
import('./chunk2.js')
// src/chunk1.js
import { Toggle } from 'react-powerplug';
console.log(Toggle)
// src/chunk2.js
import { Value } from 'react-powerplug';
console.log(Value)
// webpack.config.js
module.exports = {
mode: 'production',
externals: {
'react': 'React'
}
}
from react-powerplug.
I see.
So far I haven't been able to tweak the settings to get it to split the react-powerplug
deps, but maybe I'll figure it out.
from react-powerplug.
What are your thoughts on releasing source maps for the rollup bundles published with a package? I know that the code in the rollup bundle is easy to read, but I don't like the thought of having to do a bunch of Ctrl-F in the debugger to locate the specific code in a dependency that I'm looking for, versus being able to jump to the source module in a dependency with Ctrl-P.
from react-powerplug.
Related Issues (20)
- [Feature Request] <Tabs /> component for Tabs or Carousel. HOT 2
- Toggle documentation outdated HOT 1
- Warning: The prop `children` is marked as required HOT 1
- Currently is a pain to edit flow files in a project HOT 4
- Why are there no control props for the state management components? HOT 3
- Export flow type definitions HOT 6
- Upgrade typescript definition HOT 11
- react-powerplug breaking build after babel 7 upgrade HOT 16
- onMount={props => ...} HOT 2
- Bad English in README HOT 2
- State component - "onChange" question HOT 1
- RFC: ElementContainer HOT 3
- Latest should not point to a release candidate HOT 5
- `State` component implements `Value` component & not the other way around HOT 3
- Wrong types with Flow and react-composer and compose HOT 1
- [Feature Request] React hooks support. HOT 4
- Add access to browser events to feedback containers
- Changing state causes rerender that breaks animations
- Initial Hover state is wrong on load if cursor is over element
- Document site is broken, 404 Not Found HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-powerplug.