fix(build): Add minified ESM builds (#252)

* Add minified esm build

* Update README with available bundles

* Update package lock

Author: henrymyers

.gitignore

@@ -70,6 +70,8 @@ yarn-error.log
 
 # builded code
 dist
+min
 en
+en-min
 e2e_test
 locales.js

README.md

@@ -21,6 +21,7 @@ required to handle uploads.
 
 * [Install](#install)
 * [Usage](#usage)
+* [Available bundles](#available-bundles)
 * [Configuration](#configuration)
   * [Component configuration](#component-configuration)
   * [Widget configuration](#widget-configuration)
@@ -38,12 +39,6 @@ npm i @uploadcare/react-widget
 ```jsx
 import { Widget } from "@uploadcare/react-widget";
 
-/*
- * Also, you can save 30% in bundle size by using English-only version:
- *
- * import { Widget } from "@uploadcare/react-widget/en";
- */
-
 <Widget publicKey="YOUR_PUBLIC_KEY" />;
 ```
 
@@ -60,6 +55,14 @@ set.
 
 You can refer to our [integration guide][react-guide] for more details.
 
+## Available bundles
+By default, npm and other package managers import the full (all locales) CommonJS or ESM bundle.
+
+To reduce your bundle size, you can also import one of the following:
+* The english-only bundle (saves ~27% in bundle size) as `@uploadcare/react-widget/en`
+* The minified all-locales bundle (saves ~44% in bundle size) as `@uploadcare/react-widget/min`
+* The minified english-only bundle (saves ~60% in bundle size) as `@uploadcare/react-widget/en-min/`
+
 ## Configuration
 
 ### Component configuration

package-lock.json

@@ -9,7 +9,7 @@
   "scripts": {
     "lint:types": "dtslint types --onlyTestTsNext",
     "lint:js": "eslint ./src/** ./test/** rollup.config.js",
-    "clean": "rimraf dist en",
+    "clean": "rimraf dist en min en-min",
     "build": "rollup -c",
     "dummy": "parcel dummy/index.html",
     "prepublishOnly": "npm run clean && npm run build",
@@ -21,7 +21,9 @@
   },
   "files": [
     "dist/*",
+    "min/*",
     "en/*",
+    "en-min/*",
     "locales.js",
     "types/index.d.ts"
   ],
@@ -98,6 +100,7 @@
     "rollup": "2.43.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-module-replacement": "1.2.1",
+    "rollup-plugin-terser": "7.0.2",
     "shipjs": "0.23.1",
     "typescript": "4.2.3",
     "uploadcare-widget-tab-effects": "1.4.7"

package.json

@@ -2,11 +2,12 @@ import babel from 'rollup-plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
 import replacement from 'rollup-plugin-module-replacement'
+import { terser } from 'rollup-plugin-terser'
 
 import uploadcare from 'uploadcare-widget'
 
 export default [
-  // esm build width all locales
+  // esm build with all locales
   {
     input: 'src/index.js',
     external: [
@@ -32,7 +33,7 @@ export default [
     ]
   },
 
-  // cjs build width all locales
+  // cjs build with all locales
   {
     input: 'src/index.js',
     external: [
@@ -58,7 +59,43 @@ export default [
     ]
   },
 
-  // esm build width en locale (30% smaller)
+  // minified esm build with all locales
+  // Saves ~13 KB on react-widget and ~227 KB on uploadcare-widget
+  {
+    input: 'src/index.js',
+    external: [
+      'react',
+      'react-fast-compare',
+      'uploadcare-widget/uploadcare.min',
+      '@uploadcare/client-suspense'
+    ],
+    output: {
+      format: 'esm',
+      dir: 'min',
+      sourcemap: false
+    },
+    plugins: [
+      replacement({
+        entries: [
+          {
+            find: 'uploadcare-widget',
+            replacement: 'uploadcare-widget/uploadcare.min'
+          }
+        ]
+      }),
+      commonjs({
+        include: /node_modules/,
+        sourceMap: false
+      }),
+      babel({
+        exclude: 'node_modules/**',
+        presets: [['@babel/env', { modules: false }]]
+      }),
+      terser()
+    ]
+  },
+
+  // esm build with en locale only (saves ~147 KB on uploadcare-widget)
   {
     input: 'src/index.js',
     external: [
@@ -92,6 +129,42 @@ export default [
     ]
   },
 
+  // minified esm build with en locale only
+  // Saves ~13 KB on react-widget and ~314 KB on uploadcare-widget
+  {
+    input: 'src/index.js',
+    external: [
+      'react',
+      'react-fast-compare',
+      'uploadcare-widget/uploadcare.lang.en.min',
+      '@uploadcare/client-suspense'
+    ],
+    output: {
+      format: 'esm',
+      dir: 'en-min',
+      sourcemap: false
+    },
+    plugins: [
+      replacement({
+        entries: [
+          {
+            find: 'uploadcare-widget',
+            replacement: 'uploadcare-widget/uploadcare.lang.en.min'
+          }
+        ]
+      }),
+      commonjs({
+        include: /node_modules/,
+        sourceMap: false
+      }),
+      babel({
+        exclude: 'node_modules/**',
+        presets: [['@babel/env', { modules: false }]]
+      }),
+      terser()
+    ]
+  },
+
   {
     input: 'src/langs.js',
     output: {