[Optimization] [File size concern with Webpack]

[dacodekid]

Describe the bug By following the Optimization section - using webpack, it produces a 750kb file on development mode and a 330kb file on production mode.

To Reproduce Steps to reproduce the behavior: Follow the Optimization section from the website

Expected behavior File size should be around 30-40kb.

Actual behavior File size varies from "280kb to 750kb" based on number of components being imported.

Show your code

import { Animate, initTE } from 'tw-elements';
initTE({ Animate }, true ); // set second parameter to true if you want to use a debugger

The above code produces 288kb in production and 753kb in development.

import {
  Animate, Dropdown, Carousel, Collapse, Offcanvas, Modal, Popover, ScrollSpy, Select, initTE
} from "tw-elements";

initTE({
  Animate, Dropdown, Carousel, Collapse, Offcanvas, Modal, Popover, ScrollSpy, Select
}, true); // set second parameter to true if you want to use a debugger

The above code produces 379kb in production and 753kb in development.

Additional context Regardless of how many components being imported the development mode file size always remains at 753kb and production varies between 200-400kb.

Here are the package versions from package.json.

  "devDependencies": {
    ....
    "tailwindcss": "^3.3.2",
    "tw-elements": "1.0.0-beta2",
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1"
  }

[Bonjour123]

Any news ? I'm in the same case, using webpack-bundle-analyser, I see the whole node-modules/tw-elements/dist/js is actually embed in my bundle. I use:

mode: "production",

optimization: {
        usedExports: true}
 rules: [
    {
        include: path.resolve(__dirname, "node_modules/tw-elements"),
        sideEffects: false
    },....
    ]

[juujisai]

@dacodekid The file size will increase if we will be using more components from the package, there is nothing we can do about it. When using initTE method (in ES format) after the build, the js file should have only the components that you used with initTE method.

As of the weight in the first example, I created a new webpack app, added only Animate component and my js file weight about 70kb. Could you check if in the built file there are any other components from the tw-elements package?

@Bonjour123 Are you using UMD or ES format?

[Bonjour123]

@juujisai I use ES format, here is my only import:

import {initTE, Ripple, Input, Select} from "tw-elements";

and then I only use initTe once:

 const Page5 = () => {
    useEffect(() => {
        initTE({Ripple,Input, Select})
    }, [])
    ...    

But still, the tw-elements resulting j is 666KB and the css is 846KB. Which frankly seems a lot to me for only ripple effect, input and select..

[juujisai]

@Bonjour123 could you check if any other components are landing in your built files? For example if the code of Datepicker is inside the js file? Other than the necessary for initTE method.

I am wondering about the weight because when I add the first 3 examples of Select, Input and Ripple my built files weight Webpack:

• js 117 kB (didn't build sourcemaps). My simple webpack app also created chunks with chart.js files even though the app doesn't use them. Did it create a one 666kB file for you?
• css 78 kB (without sourcemap)

Vite:

• js 103.08 kB
• css 67.81 kB

[damsfx]

My simple webpack app also created chunks with chart.js files even though the app doesn't use them.

@juujisai Have you found a solution to this issue?
It's starting to become very problematic between the different teams.

[juujisai]

@damsfx Most likely we will have to remove Charts from the main js file and instead add them as a separate module. We are going to further test this for the 2.0.0 release.

[Bogatovmi]

It helps me to remove unused libraries with Webpack, but Charts.js still bundeled...

    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          minify: TerserPlugin.swcMinify,
          terserOptions: {
            compress: {
              unused: true,
            },
            mangle: true,
          },
        }),
      ],
   }