Reduce JS production build size by ~25%

packages/kolibri-build/src/webpack.config.base.js

@@ -110,8 +110,7 @@ module.exports = ({ mode = 'development', hot = false, cache = false, transpile
         new TerserPlugin({
           parallel: true,
           terserOptions: {
-            mangle: false,
-            safari10: true,
+            // Don't specify mangle, as it is true by default.
             output: {
               comments: false,
             },

packages/kolibri-i18n/src/intl_code_gen.js

@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const { writeSourceToFile } = require('kolibri-format');
 const logger = require('kolibri-logging');
+const uniqBy = require('lodash/uniqBy');
 
 const logging = logger.getLogger('Kolibri Intl Data');
 
@@ -49,13 +50,15 @@ module.exports = function (outputDir, languageInfoPath) {
   * Polyfill files are copied to ./polyfills/ directory to avoid external dependencies.
   */
   `;
-  const vueIntlHeader = `module.exports = function () {
-    const data = [];`;
+  const vueIntlHeader = `module.exports = function (locale) {
+    switch (locale) {`;
 
   function generateVueIntlItems(language) {
     /*
-     * Generate entries of this form:
-     *   data.push(require('vue-intl/locale-data/ar.js'));
+     * Generate entries of this form with lazy loading:
+     *
+     * case 'ar':
+     *   return import('vue-intl/locale-data/ar.js');
      *
      * Some Intl codes look like 'ar' and others look like 'bn-bd', so for Vue Intl
      * we strip off the territory code if it's there.
@@ -88,17 +91,26 @@ module.exports = function (outputDir, languageInfoPath) {
         }
       }
 
-      return `data.push(require('${module_path}'));`;
+      return `
+      case '${vue_intl_code}':
+        return import('${module_path}');`;
     }
   }
 
   const vueIntlFooter = `
-    return data;
+      default:
+        return import('vue-intl/locale-data/en.js');
+    }
   };
   `;
 
   const vueIntlModule =
-    commonHeader + vueIntlHeader + languageInfo.map(generateVueIntlItems).join('') + vueIntlFooter;
+    commonHeader +
+    vueIntlHeader +
+    uniqBy(languageInfo, l => l.intl_code.split('-')[0])
+      .map(generateVueIntlItems)
+      .join('') +
+    vueIntlFooter;
 
   const vueIntlModulePath = path.resolve(outputDir, 'vue-intl-locale-data.js');
   const intlHeader = `module.exports = function(locale) {
@@ -109,14 +121,7 @@ module.exports = function (outputDir, languageInfoPath) {
      * Generate entries of the form:
      *
      * case 'sw-tz':
-     *   return new Promise(function(resolve) {
-     *     require.ensure(
-     *       ['intl/locale-data/jsonp/sw-TZ.js'],
-     *       function(require) {
-     *         resolve(() => require('intl/locale-data/jsonp/sw-TZ.js'));
-     *       }
-     *     );
-     *   });
+     *   return import('intl/locale-data/jsonp/sw-TZ.js');
      *
      * Note that not all codes have two parts, e.g. 'en' vs 'es-mx'.
      */
@@ -174,27 +179,13 @@ module.exports = function (outputDir, languageInfoPath) {
 
       return `
       case '${language.intl_code}':
-        return new Promise(function(resolve) {
-          require.ensure(
-            ['${module_path}'],
-            function(require) {
-              resolve(() => require('${module_path}'));
-            }
-          );
-        });`;
+        return import('${module_path}');`;
     }
   }
 
   const intlFooter = `
       default:
-        return new Promise(function(resolve) {
-          require.ensure(
-            ['intl/locale-data/jsonp/en.js'],
-            function(require) {
-              resolve(() => require('intl/locale-data/jsonp/en.js'));
-            }
-          );
-        });
+        return import('intl/locale-data/jsonp/en.js');
     }
   };
   `;

packages/kolibri-jest-config/jest.conf/setup.js

@@ -56,8 +56,6 @@ Vue.config.silent = true;
 Vue.config.devtools = false;
 Vue.config.productionTip = false;
 
-i18nSetup(true);
-
 Object.defineProperty(window, 'scrollTo', { value: () => {}, writable: true });
 
 // Shows better NodeJS unhandled promise rejection errors
@@ -76,3 +74,7 @@ global.flushPromises = function flushPromises() {
   });
 };
 /* eslint-enable vue/one-component-per-file */
+
+module.exports = async function () {
+  await i18nSetup(true);
+};

packages/kolibri-sandbox/babel.config.js

@@ -3,7 +3,8 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        useBuiltIns: false,
+        useBuiltIns: 'usage',
+        corejs: '3.46',
       },
     ],
   ],

packages/kolibri-sandbox/package.json

@@ -13,19 +13,26 @@
   "author": "Learning Equality",
   "license": "MIT",
   "devDependencies": {
+    "babel-loader": "^10.0.0",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "7.0.2",
     "eslint-plugin-compat": "^6.0.2",
     "html-webpack-plugin": "5.6.5",
     "jquery": "3.5.1",
     "jszip": "^3.10.1",
+    "mini-css-extract-plugin": "^2.9.4",
     "mutationobserver-shim": "^0.3.7",
-    "purgecss": "^6.0.0"
+    "purgecss": "^6.0.0",
+    "terser-webpack-plugin": "^5.3.14",
+    "webpack": "^5.103.0"
   },
   "dependencies": {
     "core-js": "3.47",
     "dayjs": "^1.11.19",
     "iri": "^1.3.1",
     "is-language-code": "^3.1.0",
     "iso8601-duration": "^2.1.3",
+    "lodash": "^4.17.21",
     "toposort-class": "^1.0.1",
     "uuid": "^13.0.0"
   },

packages/kolibri-sandbox/src/iframe.js

@@ -1,10 +1,3 @@
-import 'core-js/es/array/includes';
-import 'core-js/es/object/assign';
-import 'core-js/es/object/entries';
-import 'core-js/es/object/values';
-import 'core-js/es/promise';
-import 'core-js/es/string/starts-with';
-import 'core-js/web/url';
 import Sandbox from './iframeClient';
 
 const sandbox = new Sandbox();

packages/kolibri-sandbox/src/xAPI/xAPIConstants.js

@@ -2,8 +2,6 @@
  * xAPI Constants
  */
 
-import 'core-js/features/set';
-
 export const OBJECT_TYPES = {
   AGENT: 'Agent',
   GROUP: 'Group',

packages/kolibri-sandbox/src/xAPI/xAPISchema.js

@@ -4,7 +4,6 @@
  * For more information, see:
  * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md
  */
-import 'core-js/features/set';
 import isArray from 'lodash/isArray';
 import isBoolean from 'lodash/isBoolean';
 import isFunction from 'lodash/isFunction';

packages/kolibri-sandbox/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const fs = require('fs');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 function Plugin() {}
@@ -30,23 +32,51 @@ module.exports = {
   entry: path.resolve(__dirname, './src/iframe.js'),
   output: {
     filename: 'sandbox-[contenthash].js',
-    chunkFilename: '[name]-[contenthash].bundle.js',
+    chunkFilename: 'sandbox-[name]-[contenthash].bundle.js',
     path: path.resolve(__dirname, '../../kolibri/core/content/static/sandbox'),
   },
-  mode: 'none',
+  mode: 'production',
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|mjs)$/,
         loader: 'babel-loader',
-        exclude: { and: [/(uuid|core-js)/, { not: [/\.(esm\.js|mjs)$/] }] },
+        exclude: [
+          // From: https://webpack.js.org/loaders/babel-loader/#exclude-libraries-that-should-not-be-transpiled
+          // \\ for Windows, / for macOS and Linux
+          /node_modules[\\/]core-js/,
+          /node_modules[\\/]webpack[\\/]buildin/,
+        ],
+        options: {
+          // Let babel auto-detect ES vs CommonJS
+          sourceType: 'unambiguous',
+        },
       },
     ],
   },
   optimization: {
     splitChunks: {
       minChunks: 2,
     },
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          mangle: {
+            safari10: true,
+          },
+          safari10: true,
+          output: {
+            comments: false,
+          },
+        },
+      }),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', { reduceIdents: false, zindex: false }],
+        },
+      }),
+    ],
   },
   plugins: [
     new Plugin(),

packages/kolibri/composables/__tests__/useNav.spec.js

@@ -4,59 +4,59 @@ import { navItems, registerNavItem } from '../useNav';
 describe('nav component', () => {
   afterEach(() => {
     // Clean up the registered navItems
-    navItems.pop();
+    navItems.value = [];
   });
   it('should not register a navItem that has no nav navItem specific properties defined', () => {
     const navItem = {};
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   it('should register a navItem that has a valid icon', () => {
     const navItem = {
       icon: 'timer',
       url: 'https://example.com',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(1);
+    expect(navItems.value).toHaveLength(1);
   });
   it('should show not register a navItem that has an invalid icon', () => {
     const navItem = {
       icon: 'not an icon',
       url: 'https://example.com',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   it('should not register a navItem that has a non-string icon', () => {
     const navItem = {
       url: 'https://example.com',
       icon: 0.1,
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   it('should register a navItem that has a valid url', () => {
     const navItem = {
       icon: 'search',
       url: 'https://example.com',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(1);
+    expect(navItems.value).toHaveLength(1);
   });
   it('should not register a navItem that has no url', () => {
     const navItem = {
       icon: 'search',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   it('should not register a navItem that has a non-string url', () => {
     const navItem = {
       icon: 'search',
       url: 0.1,
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   Object.values(UserKinds).forEach(role => {
     it(`should register a navItem that has a role of ${role}`, () => {
@@ -69,7 +69,7 @@ describe('nav component', () => {
         role,
       };
       registerNavItem(navItem);
-      expect(navItems).toHaveLength(1);
+      expect(navItems.value).toHaveLength(1);
     });
   });
   it('should not register a navItem that has an unrecognized role', () => {
@@ -79,7 +79,7 @@ describe('nav component', () => {
       role: 'bill',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
   Object.values(NavComponentSections).forEach(section => {
     it(`should register a navItem that has a section of ${section}`, () => {
@@ -92,7 +92,7 @@ describe('nav component', () => {
         section,
       };
       registerNavItem(navItem);
-      expect(navItems).toHaveLength(1);
+      expect(navItems.value).toHaveLength(1);
     });
   });
   it('should not register a navItem that has an unrecognized section', () => {
@@ -102,6 +102,6 @@ describe('nav component', () => {
       section: 'bill',
     };
     registerNavItem(navItem);
-    expect(navItems).toHaveLength(0);
+    expect(navItems.value).toHaveLength(0);
   });
 });