I am currently getting my feet whet by using rollup.js beyond the simple "helloworld" case. I have created a rollup project where I am using a combination of babel, eslint and leaflet. My rollup.config.js is given below:
// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default{
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourcemap: 'inline',
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
eslint({
exclude: [
'src/styles/**',
]
}),
babel({exclude:'node_modules/**', })
]
};
Next my main.js is given by:
import L from 'leaflet';
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
And my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
#map {
width:600px;
height:400px;
}
</style>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
<title>Learning Rollup</title>
</head>
<body>
<div id="map">
</div>
<!-- This is the bundle generated by rollup.js -->
<script src="js/main.min.js"></script>
</body>
</html>
When I execute rollup -c, I end up with a huge 1.4MB+ main.js.min file...If I remove sourcemap: 'inline' from my rollup.config.js, the size of the file drops to 390 kb. For what reason is the sourcemap exploding the size of the generated file? Isn't treeshacking supposed to further reduce the generated file?
The sourcemap will almost always be bigger than the code it's mapping. For that reason,
sourcemap: 'inline'is not recommended — dosourcemap: trueinstead and it'll be written to an adjacent.mapfile, which will only be downloaded if someone has their devtools open with sourcemaps enabled.This is unrelated to treeshaking.