All Projects → blacksonic → Babel Webpack Tree Shaking

blacksonic / Babel Webpack Tree Shaking

Tree-shaking example with Babel and Webpack

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Babel Webpack Tree Shaking

That React App You Want
That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.
Stars: ✭ 27 (-89.37%)
Mutual labels:  webpack, tree-shaking, babel
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+282.28%)
Mutual labels:  webpack, tree-shaking, babel
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-62.99%)
Mutual labels:  webpack, tree-shaking, babel
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+5440.55%)
Mutual labels:  webpack, babel
Minimal React Starter
As minimal a react starter as you can get... while also using ES6/Babel and Webpack.
Stars: ✭ 246 (-3.15%)
Mutual labels:  webpack, babel
Koa Web Kit
🚀A Modern, Production-Ready, and Full-Stack Node Web Framework with React
Stars: ✭ 199 (-21.65%)
Mutual labels:  webpack, babel
Crate
👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: ✭ 2,281 (+798.03%)
Mutual labels:  webpack, babel
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-18.11%)
Mutual labels:  webpack, babel
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+5651.97%)
Mutual labels:  webpack, babel
Xdm
a modern MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
Stars: ✭ 206 (-18.9%)
Mutual labels:  webpack, babel
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-11.81%)
Mutual labels:  webpack, babel
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-22.05%)
Mutual labels:  webpack, babel
Are You Es5
A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps.
Stars: ✭ 197 (-22.44%)
Mutual labels:  webpack, babel
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-20.47%)
Mutual labels:  webpack, babel
Mullet
Mullet Stack: Facebook in the front. Walmart in the back. (React, Hapijs, Node)
Stars: ✭ 194 (-23.62%)
Mutual labels:  webpack, babel
React Isomorphic Starterkit
Create an isomorphic React app in less than 5 minutes
Stars: ✭ 2,326 (+815.75%)
Mutual labels:  webpack, babel
React Course
Code for ui.dev's "React" course
Stars: ✭ 2,457 (+867.32%)
Mutual labels:  webpack, babel
Static Html Webpack Boilerplate
🔮 modern tooling for old-school static webpage development
Stars: ✭ 226 (-11.02%)
Mutual labels:  webpack, babel
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (-10.24%)
Mutual labels:  webpack, babel
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (-28.35%)
Mutual labels:  webpack, babel

Tree-shaking example with Babel and Webpack

devDependency Status

This repository shows how to configure Babel and Webpack to enable tree-shaking. It will eliminate dead code if they have ES2015 module format.

The source code can be found in the app/ folder, where the main file car.js doesn't use all the dependencies from engine.js. The built and transpiled files can be found in the /dist folder.

Webpack only marks unused code at bundling and leaves the removing part to minifiers. This is why all the code is included in development builds in contrary to Rollup.

If you want a more detailed explanation, read this article.

Webpack + Babel + UglifyJS

Can only remove unused functions and variables.

For development build run npm run webpack (ES2015 -> ES5 bundle).

For production build run npm run webpack-prod (ES2015 -> ES5 bundle -> UglifyJS).

When transpiling classes with Babel, it generates an IIFE with an assignment to the prototype. It is considered as a side effect by UglifyJS and it skips removing of it.

See the issues below:

Webpack + Babili

Can remove unused classes, functions and variables.

For development build run npm run webpack-es2015 (ES2015 -> ES2015 bundle).

For production build run npm run webpack-es2015-prod (ES2015 -> ES2015 bundle -> Babili).

It uses the Babili ES6+ aware minifier and solves the issues what UglifyJS has.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].