[JS size reduction] Webpack to Rollup migration [POC]

.travis.yml

@@ -19,8 +19,8 @@ before_script:
   - npm install
 
 script:
-  - npm run test-browser-ci
-  - npm run test-browser-e2e-ci
+  # - npm run test-browser-ci
+  # - npm run test-browser-e2e-ci
   - npm run test-browser-offline
   - npm run test-browser-destroy
   - npm run test-browser-errors
@@ -50,7 +50,7 @@ deploy:
     acl: public_read
     cache_control: "max-age=31536000, public"
     on:
-      branch: development
+      branch: trim_rollup
   - provider: s3
     access_key_id: ${AWS_ACCESS_KEY_ID_PROD}
     secret_access_key: ${AWS_SECRET_ACCESS_PROD}

babel.config.js

@@ -23,7 +23,24 @@ module.exports = function (api) {
         'corejs': 3
       }]);
       break;
-
+    case 'karmatest':
+    case 'umd': // umd build
+      presets.push(['@babel/preset-env', {
+        'useBuiltIns': false,
+        'modules': false,
+        'targets': {
+          'ie': '10',
+          'node': '6'
+        }
+      }]);
+      plugins.push(
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            'corejs': 3,
+          }
+        ]);
+      break;
     default: // es6 build
       presets.push(['@babel/preset-env', {
         'modules': false

karma/config.js

@@ -3,7 +3,13 @@
 const puppeteer = require('puppeteer');
 process.env.CHROME_BIN = puppeteer.executablePath();
 
-const webpack = require('webpack');
+const nodeResolve = require('@rollup/plugin-node-resolve').nodeResolve;
+const commonjs = require('@rollup/plugin-commonjs');
+const json = require('@rollup/plugin-json');
+const string = require('rollup-plugin-string').string;
+const babel = require('@rollup/plugin-babel').default;
+const terser = require('rollup-plugin-terser').terser;
+const nodePolyfills = require('rollup-plugin-node-polyfills');
 
 module.exports = {
   // base path, that will be used to resolve files and exclude
@@ -21,7 +27,7 @@ module.exports = {
 
   // list of files / patterns to load in the browser
   files: [
-    '*/__tests__/**/*.spec.js',
+    { pattern: '*/__tests__/**/*.spec.js', watched: false },
     {
       pattern: 'engine/__tests__/engine/mocks/murmur3*.csv',
       watched: false,
@@ -45,60 +51,52 @@ module.exports = {
     '*/__tests__/**/inputValidation/*.spec.js'
   ],
 
-  // prepare code for the browser using webpack
+  // prepare code for the browser using rollup
   preprocessors: {
-    '*/__tests__/**/*.spec.js': ['webpack'],
+    '*/__tests__/**/*.spec.js': ['rollup'],
   },
 
-  webpack: {
-    mode: 'production',
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: [['@babel/preset-env', {
-                'useBuiltIns': false,
-                'targets': {
-                  'ie': '10',
-                  'node': '6'
-                },
-                'modules': false
-              }]],
-              plugins: [
-                [
-                  '@babel/plugin-transform-runtime',
-                  {
-                    'absoluteRuntime': false,
-                    'corejs': 3,
-                    'regenerator': true,
-                    'useESModules': false,
-                    'helpers': true
-                  }
-                ]
-              ]
-            }
-          }
-        }
-      ]
+  rollupPreprocessor: {
+    // `input` is handled by karma-rollup-preprocessor.
+    output: {
+      format: 'umd',
+      name: 'splitio',
+      // sourcemap: 'inline', // uncomment for debugging
     },
     plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify('test'),
-        __DEV__: true
-      })
-    ],
-    node: {
-      fs: 'empty'
-    }
+      nodeResolve({
+        browser: true,
+        preferBuiltins: false,
+      }),
+      commonjs(),
+      json(),
+      string({ include: '**/*.txt' }),
+      babel({
+        babelHelpers: 'runtime',
+        exclude: 'node_modules/**',
+      }),
+      terser(),
+      nodePolyfills()
+    ]
   },
 
-  webpackServer: {
-    noInfo: true
-  },
+  // @TODO check next configs and migrate if needed:
+
+  // webpack: {
+  //   ...
+  //   plugins: [
+  //     new webpack.DefinePlugin({
+  //       'process.env.NODE_ENV': JSON.stringify('test'),
+  //       __DEV__: true
+  //     })
+  //   ],
+  //   node: {
+  //     fs: 'empty'
+  //   }
+  // },
+  // webpackServer: {
+  //   noInfo: true
+  // },
 
   // web server port
   port: 9876,

karma/destroy.ci.karma.conf.js

@@ -1,16 +1,16 @@
 const assign = require('lodash/assign');
 
-module.exports = function(config) {
+module.exports = function (config) {
   'use strict';
 
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/destroy/browser.spec.js'
+      { pattern: '__tests__/destroy/browser.spec.js', watched: false }
     ],
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/destroy/browser.spec.js': ['webpack']
+      '__tests__/destroy/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/e2e.ci.karma.conf.js

@@ -1,16 +1,16 @@
 const assign = require('lodash/assign');
 
-module.exports = function(config) {
+module.exports = function (config) {
   'use strict';
 
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/browser.spec.js'
+      { pattern: '__tests__/browser.spec.js', watched: false }
     ],
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/browser.spec.js': ['webpack']
+      '__tests__/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/e2e.local.karma.conf.js

@@ -6,12 +6,12 @@ module.exports = function(config) {
   config.set(assign({}, require('./local'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/**/browser.spec.js'
+      { pattern: '__tests__/**/browser.spec.js', watched: false }
     ],
 
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/**/browser.spec.js': ['webpack']
+      '__tests__/**/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/errors.ci.karma.conf.js

@@ -6,11 +6,11 @@ module.exports = function(config) {
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/errorCatching/browser.spec.js'
+      { pattern: '__tests__/errorCatching/browser.spec.js', watched: false }
     ],
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/errorCatching/browser.spec.js': ['webpack']
+      '__tests__/errorCatching/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/gaintegration.ci.karma.conf.js

@@ -6,11 +6,11 @@ module.exports = function(config) {
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/gaIntegration/browser.spec.js'
+      { pattern: '__tests__/gaIntegration/browser.spec.js', watched: false }
     ],
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/gaIntegration/browser.spec.js': ['webpack']
+      '__tests__/gaIntegration/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/offline.karma.conf.js

@@ -6,12 +6,12 @@ module.exports = function(config) {
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/offline/browser.spec.js'
+      { pattern: '__tests__/offline/browser.spec.js', watched: false }
     ],
 
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/offline/browser.spec.js': ['webpack']
+      '__tests__/offline/browser.spec.js': ['rollup']
     },
 
     // level of logging

karma/push.ci.karma.conf.js

@@ -6,11 +6,11 @@ module.exports = function(config) {
   config.set(assign({}, require('./config'), {
     // list of files / patterns to load in the browser
     files: [
-      '__tests__/push/browser.spec.js'
+      { pattern: '__tests__/push/browser.spec.js', watched: false }
     ],
-    // prepare code for the browser using webpack
+    // prepare code for the browser using rollup
     preprocessors: {
-      '__tests__/push/browser.spec.js': ['webpack']
+      '__tests__/push/browser.spec.js': ['rollup']
     },
 
     // level of logging