Switch Rollup from Webpack
I learned about the introduction of Tree Shaking while removing unused code of egjs InfiniteGrid components.medium.com
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 is a bundler that makes modules (files) of large and complicated code small as a
This is the problem of Webpack and why I use Rollup.
- Webpacks are not bundled in ESM format.
- No redundant code is removed when building from webpack.
- The default size is large when building from the Webpack.
- Tree Shaking does not work well in Webpack3.
What would be better with Rollup?
- 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.
Rollup can be bundled in ESM format by combining multiple modules (files) into one 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.
export are replaced with
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
extends. This function exists for each file, recognizes it as a different function, and and increases in size by the number of files.
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
Default code when building with Rollup
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.
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.
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.
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.
However, if the number of entries increases, it becomes complicated because you have to use duplicate options for each entry.
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.
In three projects, we switched from Weback 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.