带导入的Foundation 6.4 app.js Handpick组件

Question

Using the new Panini Zurb template with webpack. It is not clear yet how to handpick modules/components following the one line of instructions they provide in app.js:

import $ from 'jquery';
// import whatInput from 'what-input';
window.$ = $;

// import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out 
 the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';
import {Tabs} from './lib/foundation-explicit-pieces';


$(document).foundation();
// if($('#about-tabs').length) {var _tabs = new Foundation.Tabs($('#about-tabs'));}

link to the section: github repo

And at this point it's working, but it seems like everything in foundation is packaged resulting in a ~270KB file.

I'm definitely not aware of all the aspects of import/export, any suggestion on a comprehensive source will be very appreciated.

Answer 1

Apparently it was intuitive enough, in the support file it's enough to comment out the single imports.

With all out but 1 component the filesize becomes still ~160KB after build.

Any way to tree shake more? It's basically the same as the previous version without webpack