question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack bundle for Node.js?

See original GitHub issue

For next steps of reducing size I need the decision from you.

j8nhbdb

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:

  1. The user will have 2 webpack preambles (webpack inner functions and magic) — one from their webpack, second from EmojiMart.
  2. Even if the user has own core-js they anyway will have 2 core-js copies — one from their dependencies, second from EmojiMart. The main problem that core-js is really big. About 10% of the current EmojiMart bundle.
  3. 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:

  1. During build process compile files by Babel to dist/, but don’t bundle them into the single file. package.json’s main will target to dist/index.js. Anyway, most of React users have webpack or other bundlers.
  2. Bundle this files to dist/emoji-mart.min.js for backward compatibility, but do not use this file in package.json’s main.
  3. core-js and all other dependencies will be in package.json dependencies and required with require('core-js'). So we will use same core-js as the user already has.
  4. Remove PropTypes with babel-plugin-transform-react-remove-prop-types.
  5. Try to find code uses process and rewrite it, so webpack will not insert process polyfill.

Question for @EtienneLem:

  1. 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.
  2. 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 add core-js (for example, we do not send huge core-js to everyone, we send it only to IE 11 users).

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:25 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
aicommented, Oct 15, 2017

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.

1reaction
aicommented, Sep 11, 2017

@davojta can you check EmojiMart from my PR? Maybe I fixed problem 😄

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found