tree-shaking

I have a set of spec v1 custom elements which I'm using webpack 4 to bundle (and babel-loader to transpile). The components all look similar to this: export class CompDiv extends HTMLDivElement { constructor(...args) { const self = super(...args); self.property = null; return self; } connectedCallback() { console.log('connected CompDiv'); } } customElements.define('comp-div', CompDiv, { extends: 'div' }); Now to be able to create custom packages from these components using selective, named imports I need to mark these files as side-effect-free . The component registration, though, takes place

I have set up webpack 2 with angular and mostly it seems to work. It does not seem though that it does the tree-shaking , since I have an app that does almost nothing, and the vendor.js is still 800+ KB. It seems there is very little information available on how to turn the tree-shaking on, but what I understood that it's automatically turned on for ES6 modules, but does not work for ES5. Is that so? And most importantly: How can I apply tree-shaking to typescript/angular2 with webpack2? I have found this very nice repository with examples on how to do this. As mentioned in there and in the

一、js模块化打包概述   随着js模块化规范AMD、CMD、commonJs的出现，模块打包工具也在不断的出现和演变，依次出现了r.js、browserify和webpack，过去的2015年就是webpack大行其道的一年，又随着reactjs、es6的出现，webpack更是深入人心，因为其人性化的特点和友好性，确实给前端模块打包带来了极大的方便。   不过今天并不是重点讲webpack，而是rollup，要了解webpack，可以看我的另一篇文章： http://ouvens.github.io/frontend-build/2015/04/01/webpack-tool.html ，在讲rollup之前先来看看几种之前的前端打包方案。 二、js模块化打包方案   先区分下几个不同概念：包管理工具（package manager）、模块加载器（module loader），打包工具（bundler），包管理器指管理安装js模块的这类，例如npm、bower、jspm这些，模块加载器指向requirejs、modjs、seajs这些，模块加载器又主要遵循AMD、CMD、Commonjs三种规范，打包工具则指r.js、browserify、webpack这类。 1、r.js   在grunt结合requirejs的年代，r.js作为通用标配的打包工具普世存在