Comparing final bundle size with svelte/template (rollup) and svelte/template-webpack

[frederikhors]

I'm comparing github.com/sveltejs/template and github.com/sveltejs/template-webpack.

I expected the final bundle to be the same with the same codebase.

What I did:

• Cloned both template using degit

• Removed sourcemap for js files in rollup.config.js, line 12: sourcemap: false

• Removed line 10 (window.app = app;) in main.js for webpack template (now the two main.js are equal in content)

• Updated all dependencies to:

  • sveltejs/template (Rollup), package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "npm-run-all": "4.1.5",
    "rollup": "1.12.2",
    "rollup-plugin-commonjs": "10.0.0",
    "rollup-plugin-livereload": "1.0.0",
    "rollup-plugin-node-resolve": "5.0.0",
    "rollup-plugin-svelte": "5.0.3",
    "rollup-plugin-terser": "4.0.4",
    "sirv-cli": "0.4.2",
    "svelte": "3.4.1"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public",
    "start:dev": "sirv public --dev"
  }
}

• sveltejs/template-webpack (Webpack), package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "cross-env": "5.2.0",
    "css-loader": "2.1.1",
    "mini-css-extract-plugin": "0.6.0",
    "serve": "11.0.0",
    "style-loader": "0.23.1",
    "svelte": "3.4.1",
    "svelte-loader": "2.13.4",
    "webpack": "4.31.0",
    "webpack-cli": "3.3.2",
    "webpack-dev-server": "3.4.1"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "webpack-dev-server --content-base public"
  }
}

Results:

• For Rollup one:

var app=function(){"use strict";function t(){}function n(t){return t()}function e(){return Object.create(null)}function r(t){t.forEach(n)}function o(t){return"function"==typeof t}function c(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function a(t,n){t.appendChild(n)}function u(t){return document.createTextNode(t)}let f;function s(t){f=t}const i=[],d=Promise.resolve();let l=!1;const $=[],m=[],p=[];function h(t){m.push(t)}function g(){const t=new Set;do{for(;i.length;){const t=i.shift();s(t),y(t.$$)}for(;$.length;)$.shift()();for(;m.length;){const n=m.pop();t.has(n)||(n(),t.add(n))}}while(i.length);for(;p.length;)p.pop()();l=!1}function y(t){t.fragment&&(t.update(t.dirty),r(t.before_render),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_render.forEach(h))}function _(t,n){t.$$.dirty||(i.push(t),l||(l=!0,d.then(g)),t.$$.dirty=e()),t.$$.dirty[n]=!0}function x(c,a,u,i,d,l){const $=f;s(c);const m=a.props||{},p=c.$$={fragment:null,ctx:null,props:l,update:t,not_equal:d,bound:e(),on_mount:[],on_destroy:[],before_render:[],after_render:[],context:new Map($?$.$$.context:[]),callbacks:e(),dirty:null};let y=!1;var x;p.ctx=u?u(c,m,(t,n)=>{p.ctx&&d(p.ctx[t],p.ctx[t]=n)&&(p.bound[t]&&p.bound[t](n),y&&_(c,t))}):m,p.update(),y=!0,r(p.before_render),p.fragment=i(p.ctx),a.target&&(a.hydrate?p.fragment.l((x=a.target,Array.from(x.childNodes))):p.fragment.c(),a.intro&&c.$$.fragment.i&&c.$$.fragment.i(),function(t,e,c){const{fragment:a,on_mount:u,on_destroy:f,after_render:s}=t.$$;a.m(e,c),h(()=>{const e=u.map(n).filter(o);f?f.push(...e):r(e),t.$$.on_mount=[]}),s.forEach(h)}(c,a.target,a.anchor),g()),s($)}class b{$destroy(){var n,e;e=!0,(n=this).$$&&(r(n.$$.on_destroy),n.$$.fragment.d(e),n.$$.on_destroy=n.$$.fragment=null,n.$$.ctx={}),this.$destroy=t}$on(t,n){const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(n),()=>{const t=e.indexOf(n);-1!==t&&e.splice(t,1)}}$set(){}}function v(n){var e,r,o,c;return{c(){var t;t="h1",e=document.createElement(t),r=u("Hello "),o=u(n.name),c=u("!"),e.className="svelte-i7qo5m"},m(t,n){!function(t,n,e){t.insertBefore(n,e||null)}(t,e,n),a(e,r),a(e,o),a(e,c)},p(t,n){var e,r;t.name&&(e=o,r=""+(r=n.name),e.data!==r&&(e.data=r))},i:t,o:t,d(t){var n;t&&(n=e).parentNode.removeChild(n)}}}function w(t,n,e){let{name:r}=n;return t.$set=(t=>{"name"in t&&e("name",r=t.name)}),{name:r}}return new class extends b{constructor(t){super(),x(this,t,w,v,c,["name"])}}({target:document.body,props:{name:"world"}})}();

• For Webpack one:

!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(2)},function(t,e,n){},function(t,e,n){"use strict";function r(){}n.r(e);function o(t){return t()}function c(){return Object.create(null)}function u(t){t.forEach(o)}function a(t){return"function"==typeof t}function i(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}new Set;function s(t,e){t.appendChild(e)}function f(t){return document.createElement(t)}function l(t){return document.createTextNode(t)}let d;function p(t){d=t}const $=[],m=Promise.resolve();let h=!1;const y=[],b=[],g=[];function x(){h||(h=!0,m.then(v))}function _(t){b.push(t)}function v(){const t=new Set;do{for(;$.length;){const t=$.shift();p(t),O(t.$$)}for(;y.length;)y.shift()();for(;b.length;){const e=b.pop();t.has(e)||(e(),t.add(e))}}while($.length);for(;g.length;)g.pop()();h=!1}function O(t){t.fragment&&(t.update(t.dirty),u(t.before_render),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_render.forEach(_))}let j;function w(t,e){t.$$&&(u(t.$$.on_destroy),t.$$.fragment.d(e),t.$$.on_destroy=t.$$.fragment=null,t.$$.ctx={})}function S(t,e,n,i,s,f){const l=d;p(t);const m=e.props||{},h=t.$$={fragment:null,ctx:null,props:f,update:r,not_equal:s,bound:c(),on_mount:[],on_destroy:[],before_render:[],after_render:[],context:new Map(l?l.$$.context:[]),callbacks:c(),dirty:null};let y=!1;var b;h.ctx=n?n(t,m,(e,n)=>{h.ctx&&s(h.ctx[e],h.ctx[e]=n)&&(h.bound[e]&&h.bound[e](n),y&&function(t,e){t.$$.dirty||($.push(t),x(),t.$$.dirty=c()),t.$$.dirty[e]=!0}(t,e))}):m,h.update(),y=!0,u(h.before_render),h.fragment=i(h.ctx),e.target&&(e.hydrate?h.fragment.l((b=e.target,Array.from(b.childNodes))):h.fragment.c(),e.intro&&t.$$.fragment.i&&t.$$.fragment.i(),function(t,e,n){const{fragment:r,on_mount:c,on_destroy:i,after_render:s}=t.$$;r.m(e,n),_(()=>{const e=c.map(o).filter(a);i?i.push(...e):u(e),t.$$.on_mount=[]}),s.forEach(_)}(t,e.target,e.anchor),v()),p(l)}"undefined"!=typeof HTMLElement&&(j=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,e,n){this[t]=n}$destroy(){w(this,!0),this.$destroy=r}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(){}});class k{$destroy(){w(this,!0),this.$destroy=r}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(){}}n(1);function M(t){var e,n,o,c;return{c(){e=f("h1"),n=l("Hello "),o=l(t.name),c=l("!"),e.className="svelte-i7qo5m"},m(t,r){!function(t,e,n){t.insertBefore(e,n||null)}(t,e,r),s(e,n),s(e,o),s(e,c)},p(t,e){var n,r;t.name&&(n=o,r=""+(r=e.name),n.data!==r&&(n.data=r))},i:r,o:r,d(t){var n;t&&(n=e).parentNode.removeChild(n)}}}function C(t,e,n){let{name:r}=e;return t.$set=(t=>{"name"in t&&n("name",r=t.name)}),{name:r}}const E=new class extends k{constructor(t){super(),S(this,t,C,M,i,["name"])}}({target:document.body,props:{name:"world"}});e.default=E}]);

What I'm scared:

With more packages and components the difference for final bundle in size is about >15KB (rollup is smaller).

Why does webpack's weigh more?

This scares me.

[Saiv46]

Bump

It seems strange because of the Webpack Module System, which deals with UMD/AMD/CommonJS dependencies by itself.

[antony]

Rollup is significantly more effective at tree-shaking than Webpack, and thus can remove dead code more effectively, meaning a smaller bundle size.

For usage questions, please come and chat to us