Webpack bundle for Node.js?
See original GitHub issueFor next steps of reducing size I need the decision from you.
Right now EmojiMart bundle everything including dependencies to webpack bundle at dist/emoji-mart.js
and dist/emoji-mart.min.js
. As result we have 3 problems:
- The user will have 2 webpack preambles (webpack inner functions and magic) — one from their webpack, second from EmojiMart.
- Even if the user has own
core-js
they anyway will have 2core-js
copies — one from their dependencies, second from EmojiMart. The main problem thatcore-js
is really big. About 10% of the current EmojiMart bundle. - PropTypes slow down JS execution in production and keep size in the EmojiMart bundle. If the user has own PropTypes, they will have 2 copies of PropTypes.
My plan of size optimization:
- During build process compile files by Babel to
dist/
, but don’t bundle them into the single file.package.json
’smain
will target todist/index.js
. Anyway, most of React users have webpack or other bundlers. - Bundle this files to
dist/emoji-mart.min.js
for backward compatibility, but do not use this file inpackage.json
’smain
. core-js
and all other dependencies will be inpackage.json
dependencies
and required withrequire('core-js')
. So we will use samecore-js
as the user already has.- Remove PropTypes with
babel-plugin-transform-react-remove-prop-types
. - Try to find code uses
process
and rewrite it, so webpack will not insertprocess
polyfill.
Question for @EtienneLem:
- Do we really need
dist/emoji-mart.min.js
? I understand this file for jQuery plugins, etc. But it is extremely rare to use React without any bundler. - Do we really need
core-js
? Maybe we can rewrite code, that uses some ES6 classes? Or just put the warning to docs, if you need to support IE 11, please addcore-js
(for example, we do not send hugecore-js
to everyone, we send it only to IE 11 users).
Issue Analytics
- State:
- Created 6 years ago
- Comments:25 (4 by maintainers)
Top Results From Across the Web
Node Interface - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >How to bundle your library for both NodeJS and Browser with ...
How to build JavaScript libraries for multiple targets. ... In webpack.config.js we'll have one general configuration for both targets, ...
Read more >Introduction To Webpack with Node.js - Section.io
Webpack is a static module bundler for JavaScript applications. It takes modules, whether that's a custom file that we created or something ...
Read more >How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >Bundling NodeJs Application using Webpack - Learn Infinity
Step 1: Install nodejs in your system / Make workspace directory · Step 2: Install required packages using NPM · Step 3: Create...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You got different number. Size Limit shows size after UglifyJS and gzip.
Just ignore difference, everything is fine.
But reading about UglifyJS and gzip is always good.
@davojta can you check EmojiMart from my PR? Maybe I fixed problem 😄