Switch Rollup from Webpack

Previously we applied Tree Shaking in Webpack and it helped to reduce size.

I was looking for another way to reduce the size other than Tree Shaking. and found Rollup bundler.

https://rollupjs.org/guide/en

Like Webpack , Rollup is a bundler that makes modules (files) of large and complicated code small as a library or application .

This is the problem of Webpack and why I use Rollup.

1. Webpacks are not bundled in ESM format.
2. No redundant code is removed when building from webpack.
3. The default size is large when building from the Webpack.
4. Tree Shaking does not work well in Webpack3.

What would be better with Rollup?

1. Bundled in ESM format.

The Tree Shaking condition is that the code must be in ESM format, but the Webpack can not be bundled in ESM format and must be converted to a separate file.

Each ts file can only be converted to es module format

Rollup can be bundled in ESM format by combining multiple modules (files) into one module.

Rollups can be converted to one es module

It is more manageable and easier to use because it combines into one file rather than distributing it as individual files.

2. The module’s import / export process disappears and duplicate code disappears.

import , and export are replaced with __webpack_require__ , exports object , and the code size increases. So, if you use a constant, the name may not be uglify, and the code size may increase.

• If you combine several modules into one module, you can reduce the size considerably.

When combined into one module, they are combined into one scope. And because the constant name is also uglify, the code size is reduced.

There is also ModuleConcatenationPlugin in Webpack, so you can see effects similar to Rollup. However, you can not remove duplicate functions from typescript, babel plugin.

A typical example is polyfill that occurs when ES6(or higher) is transpiled to ES5, such as assign and extends . This function exists for each file, recognizes it as a different function, and and increases in size by the number of files.

In the Webpack, polyfill is generated for each of the three modules

The above code adds three identical extends functions when building with Webpack. However, rollups merge into one module and only one of the same polyfill exists.

3. The default code size when building is smaller than Webpack.

• Default code when building with Webpack

Webpack Default Code

Default code when building with Rollup

Rollup Default Code

The difference between the Webpack and Rollup default code sizes is about 1.2kb.

4. Tree shaking works well in Webpack3.

One reason Tree Shaking does not work in Webpack3 is 6.If you do not use functions that use imported libraries .

If you refer to the “a” function in “b” function, but you do not actually use the “b” function

Tree shaking is not done because Webpack3 judges that “b” used “a”, even though we used an external “a” function in the “b” function but did not actually use the “b” function.

The b function uses the a function, but it is an internal non-external module.

This can be solved because Rollup combines several modules into one module (ESM).

Example of rollup settings

Compared to the complex Webpack settings, Rollup has a very simple default setting.

The following files are examples of rollup configuration files applied by egjs.

• https://github.com/naver/egjs-component/blob/master/rollup.config.js
• https://github.com/naver/hammer.js/blob/master/rollup.config.js
• https://github.com/naver/egjs-axes/blob/master/rollup.config.js
• https://github.com/naver/egjs-flicking/blob/master/rollup.config.js

Disadvantages

1. More entries (input, output) can become more complex.

Looking at the example code, it might be easier to write config than Webpack if there are few entries.

multi entries

However, if the number of entries increases, it becomes complicated because you have to use duplicate options for each entry.

The component , axes , flicking reduces complexity by setting the default config.

2. You can not define the rules of plugins.

Webpack can activate / deactivate the plugin with patterns of regular expressions or filenames. However, because Rollup can not set rules, you must specify a plugin list for each entry.

Results

In three projects, we switched from Weback to Rollup.

component
axes
flicking

from Webpack to Rollup

In the case of component , the basic code is reduced. In the case of Axes , only a part of Hammer is used. In the case of Flicking , a part of the axes is used and combined into one module. These cases have greatly reduced size.

There are many ways to reduce the size, and one of them was to introduce the benefits of changing the bundler from Webpack to Rollup. I would like to be a reference to those who are worried about the size reduction.