Comments (21)
I have same issue, my project's javascripts are using spread operator
and is throwing error
Module parse failed: /Users/alejandrosoto/Downloads/github-repos/crafter-social-rui/src/js/main.js Unexpected token (8:25)
You may need an appropriate loader to handle this file type.
from size-limit.
Hm. We use UglifyES specially too parse ES6.
Maybe you have ES2017 here? Do you call Size Limit to uncomplicated sources or on dist/
directory (content which you publish to npm).
from size-limit.
Right now we have dist/index.js
there but the report size-limit generates is useless for the dist. I've tried to use src/index.js
there in order to get insights for optimization, but it failed with the error.
from size-limit.
Understand. I will think about the solution.
Right now I have 2 questions:
- Do you pack all your files into one file in
dist/
? Like, use rollup/webpack in library build process. - Why do you do it and not exports multiple files?
from size-limit.
- Yes, I use webpack. https://github.com/react-dropzone/react-dropzone/blob/master/webpack.config.js
- I want to export UMD. ES2015 export is considered: react-dropzone/react-dropzone#496
from size-limit.
UMD bundle is something like AMD? To take your library in single file and load it into non-webpack project?
from size-limit.
Yes. It allows non-webpack users to use it.
from size-limit.
Other questions (sorry that I use you to understand non-relevant topic :D)
- Why not export multiple files for webpack user and umd for non-webpack users?
- Do you have many non-webpack users in React community?
- What if user need only single file from your npm package? tree-shaking still doesn’t work perfectly right now.
from size-limit.
If we want to talk about this issue. I see two possible ways:
- Use source map and process
dist/*.js
- Accept custom webpack config (so your UMD build and Size Limit will be packaged by same webpack config)
- Add Webpack Bundle Analyzer to your webpack config (so you will use Size Limit only for UMD bundle size check)
If we will just add babel-loader
to Size Limit, Size Limit bundle could have different size compared to dist/
file.
from size-limit.
I will think about solution on this weekend.
from size-limit.
I will think about it on next week. Sorry, I need more time to release Logux 0.2.
from size-limit.
Don’t be sorry! It’s open source and I don’t expect you to jump on this :)
from size-limit.
@asotog @okonet temporary solution:
- Use Size Limit on your
dest/
files. It is the only way to get real accurate cost of your project to the user. - I don’t recommend to pack everything in one file in
dest/
. It is extremely rare to use React/etc libraries without webpack or any other builder. And with separated files, your users will be able to require separated filesimport foo from 'lib/foo'
without tree-shaking (that doesn’t work) and etc. The simplest and good way. - If you still need to pack everything in one file (or have the legacy project), add Webpack Bundle Analyzer to your builder.
Right now I have the idea to add source map support Webpack Bundle Analyzer. It will solve all these problems perfectly (you can still use everything-in-one-file bundle and size-limit --why
will work). But right now I am working on my slides for React Vienna and ReactiveConf, so I will not be able to start work until Oct 26.
from size-limit.
@ai the sizing validation works fine, but the --why
flag is not throwing enough information on port 8888 for dest/
file, only shows one big file (main.js) box
from size-limit.
@asotog yeap. This happens because of you server one big file to your users main.js
. Is there only one file in dest/
?
There are 3 options:
- Don’t build your files to one file in
dest/
. Just compile files by Bable, but don’t use Webpack. - Add Webpack Bundle Analyzer to your build tool, which is used to pack files in
dest/
. - Wait few months while I find a solution how to add source map support to Webpack Bundle Analyzer.
from size-limit.
As a quick solution, you can use custom webpack config #29
But it is not the best solution since we must emulate real user experience when somebody will add your library to project. So I will keep this issue open until I will find time to add source map support to Webpack Bundle Analyzer.
from size-limit.
👋 Not sure if it's common use case but it's a valid one so I guess it's worth-mentioning.
I have a lib which is es6+ (a private repo). I don't compile it down to es5 as it's being used in a controlled environment, in my other project, which is webpack-based app. So all compilation goes there (only once). The only way to use size-limit in my lib now is to add babel step there, right?
from size-limit.
@mikesub nope, Size Limit should work with any syntax supported by Node.js (we use uglify-es
which support ES6+). Do you have an error? Maybe there is a problem in webpack or UglifyES parsers.
from size-limit.
Found it. Besides common es6+ stuff I use object rest/spread and it's in Stage 3 currently. Removed that and it worked. Thanks!
from size-limit.
I have the same problem with the spread operator. Ended up using the solution suggested by @ai
Don’t build your files to one file in dest/. Just compile files by Bable, but don’t use Webpack.
from size-limit.
Size Limit 2.0 was released with modular architecture. Now we have a better UI to explain that --why
will not work for a custom builder.
from size-limit.
Related Issues (20)
- Should I ignore some file types?
- size-limit fails with rxjs imports
- Add customisation for improving performance culture HOT 6
- Loosen strictness of peer dependency requirement of `tslib` HOT 1
- Global installation with plugin support HOT 5
- React should be peer dependency HOT 7
- The comment might be misleading when size limit fails HOT 5
- Unable to run on windows 10 HOT 4
- Receive ERR_UNSUPPORTED_ESM_URL_SCHEME error on version 10 HOT 5
- Switch from GZIP to Brotli by default HOT 4
- plugins are `import`ed with `require.resolve` which will resolve `commonjs` entry for dual package HOT 4
- Allow customize error message HOT 1
- Inaccurate bundle size when using dynamic imports HOT 10
- Support `.size-limit.mjs` config file HOT 2
- Migrate codebase to TypeScript HOT 4
- Esbuild plugin produces incorrect numbers when CSS used HOT 7
- Extra blank lines when using --silent HOT 1
- CLI does not work with workspaces and yarn pnp or pnpm without hoisting HOT 4
- Can the config option be supported like eslint or stylelint to specify the path of the configuration file? HOT 1
- size-limit fails to detect paths/files containing unescaped characters HOT 1
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 size-limit.