Large bundle size

[davemccrea]

Hi, just getting started with ui5-webcomponents and considering it for an upcoming project. I have a question about bundle size - perhaps somebody can enlighten me.

If I pull in a simple switch component, the final bundle size (no compression, no sourcemaps) is 470kb. Is this sort of size to be expected? Am I overlooking something?

// app.js
import "@ui5/webcomponents/dist/Switch";

// index.html
<ui5-switch></ui5-switch>

Webpack config (pretty standard):

const path = require("path");
const glob = require("glob");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = (env, options) => {
  const devMode = options.mode !== "production";

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({}),
      ],
    },
    entry: {
      app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
    },
    output: {
      filename: "[name].js",
      path: path.resolve(__dirname, "../priv/static/js"),
      publicPath: "/js/",
    },
    devtool: devMode ? "eval-cheap-module-source-map" : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.[s]?css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: "../css/app.css" }),
      new CopyWebpackPlugin([{ from: "static/", to: "../" }]),
    ].concat(devMode ? [new HardSourceWebpackPlugin()] : []),
  };
};

Edit: typo

[pskelin]

This is definitely too big. Perhaps you are transpiling to ES5? If you go to the home page
https://sap.github.io/ui5-webcomponents/

and check the network panel for bundle.esm.js, you will see that it is 221 Kb gzipped and 961 Kb actual content. This bundle contains every single webcomponent (even from the fiori package).

Typical sizes for a single component are 15-20 KB (compressed, that is what matters for download) depending on component complexity. This includes the base element that all components extend (the framework part so too say), and every additional web component is adding 3-5 Kb on top (the actual component implementation.

A real example I just did:
ui5-switch: 23.86kb
ui5-button: 24.30kb
ui5-switch + ui5-button: 26.12kb

I used vitejs to calculate these, here are the steps:

$ npm init @vitejs/app switch-size --template vanilla
$ cd switch-size
$ npm install
$ npm install @ui5/webcomponents --save

add a switch in main.js

import '@ui5/webcomponents/dist/Switch.js';

document.querySelector('#app').innerHTML = `
  <ui5-switch></ui5-switch>
`

$ npm run build
...
dist/assets/vendor.a0d508d1.js     114.19kb / brotli: 23.86kb

[davemccrea]

Thanks for the reply! Seems to be a webpack config issue ... though I can't workout why. Experimenting with other bundlers such as Snowpack has worked for me.

[al-gerasimov]

I am also getting much bigger size. Only 5 components and 4 SVG icons, and I am getting
"dist/assets/index.c3222971.js 576.10 KiB / gzip: 131.14 KiB"
Basically I have followed official UI5 component "Getting started". Bundled with "vite build"