Comments (7)
@oyeanuj thanks for your concern, the footprint of this bundle should be very small. There maybe a bundling issue that meant it is larger than it should be, but I'm pretty sure there isn't because when I look at the cjs
(dist) directory, it looks like this unminified: https://www.dropbox.com/s/trc6eahgxnrp3oz/Screenshot%202017-10-30%2007.21.13.png?dl=0
There are two dependencies:
- modularscale-js: 966 bytes minified (505 bytes gzipped)
- object-get: 740 bytes minified (421 bytes gzipped)
Now I don't know how large your design system object is, but that might be the issue..
If there's something that I'm missing, it would be great to understand what it is so we can resolve this.
from design-system-utils.
@oyeanuj are you certain that this package increased your bundle by 500k? Have you had a chance to test it?
Also, watch this space for some updates. There's an open PR at the moment, that changes the API slightly, and I will be working on some of your other suggestions soon.
from design-system-utils.
@mrmartineau I do agree that is weird, hence the framing as a question. So, I've tried to reproduce it in a couple of ways:
- Create React App: This failed to compile the production build as it couldn't find a pre-compiled file in the repo. Here is the reproduction (https://github.com/oyeanuj/my-errors/tree/design-system-utils) and here was the errors:
→ yarn run build
yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/design-system-utils/src/index.js:6
Read more here: http://bit.ly/2tRViJ9
error Command failed with exit code 1.
So that might be something to fix in general?
- With React-Universally: I've been able to reproduce it with a clean branch from the master of the kit. If you run
yarn run build
before and after this one commit, you see the weird increase in bundle size.
I'll try to dig more to isolate the cause to see if it was my setup or can be reproduced generally (hence the attempt to use CRA originally).
from design-system-utils.
This is a strange one... Bundlephobia says the package is 887b
Regarding the minify error. I am using this info in the package.json, which means webpack will try to use that if it can.. so perhaps your webpack config needs amending.. I realise this isn't a solution for everyone so it would be good to fix.
"main": "./cjs/index.js",
"module": "./src/index.js",
from design-system-utils.
On more investigation, it does seem to be a minification error of some sort while bundling. I imported the files in the package to use them as a local library and the error went away.
I imagine it has to do something with UglifyJS
not working well with this library for some reason. If it is unable to minify and uglify, that could explain the bundle size increase. Both my config (via React-Universally) and CRA use Uglify and both are having those issues.
It seems like we should resolve the CRA minify issue above as per http://bit.ly/2tRViJ9 since that would help a lot more people? Not sure what is the best way to do so.
from design-system-utils.
Another update: So, it turns out that Webpack v3 so far uses the 0.4.6 of the UglifyJS plugin and with v4, they will start using 1.x of the UglifyJS plugin (which internally uses Uglify-ES).
So, I upgraded to v1 and the errors seem to go away, and the bundle size seems back to normal.
Closing issue to reduce noise now that we know the cause.
PS. @mrmartineau thanks for engaging in this conversation!
from design-system-utils.
@oyeanuj thanks for looking into this again. I'm not sure of the best way to proceed. I think it could be due to the main/module fields, perhaps I also need a browser
field as well (See https://webpack.js.org/configuration/resolve/#resolve-mainfields for more info), but even that probably wouldn't solve the issue because that bundle ought to be a UMD version.. Any ideas?
from design-system-utils.
Related Issues (11)
- Add type definitions
- SASS "exporting" HOT 1
- Allow for type sizes to be specified by screen size HOT 5
- Fails with create-react-app (and others) HOT 2
- Interested in combining efforts? HOT 1
- Issue with baseFontSize using units and pxTo HOT 4
- Feature Request: 'toPx' function HOT 3
- Difference with styled-system? HOT 2
- Add tests HOT 1
- change `type.baseFontSize` to be string
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 design-system-utils.