babel-webpack-tree-shaking - Tree-shaking example with Babel and Webpack

  •        7

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.

https://github.com/blacksonic/babel-webpack-tree-shaking

Tags
Implementation
License
Platform

   




Related Projects

budgeting-sample-app-webpack2 - Budgeting - React + Redux + Webpack 2 (tree shaking) Sample App

  •    Javascript

Production-ready React + Webpack architecture implemented on consumer web apps of some of the most successful enterprises in the world. Perceived performance and development experience are key factors in this setup. You can use this code base for learning or to scaffold your mission-critical project. See live demo.

budgeting - Budgeting - React + Redux + Webpack (tree shaking) Sample App

  •    Javascript

Production-ready React + Webpack architecture implemented on consumer web apps of some of the most successful enterprises in the world. Perceived performance and development experience are key factors in this setup. You can use this code base for learning or to scaffold your mission-critical project. See live demo.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

webpack-closure-compiler - Google Closure Compiler plugin for Webpack

  •    Javascript

Closure Compiler is the most advanced JavaScript optimization tool. It generates smallest bundle and emits efficient JavaScript code by doing whole program analysis and optimization, removing closures and inlining function calls, as well as tree-shaking for AMD, CommonJS and ES2015 modules. While there's JavaScript version of Closure Compiler, the original compiler is written in Java and thus Java version is more complete and performs better in terms of JavaScript code optimizations and compilation speed. If you want to use Java-based compiler, make sure you have installed Java SDK.

webpack-common-shake - CommonJS Tree Shaker plugin for WebPack

  •    Javascript

Please file an issue if anything is broken.See common-shake for abstract bundler-independent implementation.


agadoo - Check whether a package is tree-shakeable

  •    Javascript

Tells you whether the JavaScript library you're building is tree-shakeable. Tell you why tree-shaking fails, if it does. Maybe in a future version.

react-dynamic-route-loading-es6 - Auto chunking and dynamic loading of routes with React Router and Webpack 2

  •    Javascript

Webpack 2 automatically splits routes in chunks (small bundles) and loads them on demand. ##System Requirements Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

babel-minify-webpack-plugin - Babel Minify Webpack Plugin

  •    Javascript

minifyOpts are passed on to babel-preset-minify. You can find a list of all available options in the package directory.

minimal-react-webpack-babel-setup - The minimal React, Webpack, Babel Setup

  •    Javascript

The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app? Read this tutorial how to setup your own boilerplate project.

react-native-webpack-starter-kit - :herb: Build your React Native app with Webpack and Babel

  •    Objective-C

Build your React Native app with Webpack and Babel. Simple asset pipeline for seed apps built with React Native. Uses Babel 6 for ES7 JavaScript transpilation with Stage 1 support, and Webpack as a dev server and module bundler. Provides static code linting using ESLint and build output in the same console window, and Source Maps for debugging in the browser. Unprescriptive in terms of test frameworks and Flux implementations. Additional features listed below.

babel-plugin-dynamic-import-webpack - Babel plugin to transpile import() to require

  •    Javascript

Babel plugin to transpile import() to require.ensure, for Webpack.Note that Webpack 2 has gotten import() after this code was written.

serverless-babel-starter - ๐Ÿ—„๐Ÿ™…‍โ™€๏ธ Serverless with all the fixings: Webpack, Babel, Jest, ESLint, and Prettier

  •    Javascript

Postlight's Modern Serverless Starter Kit adds a light layer on top of the Serverless framework, giving you the latest in modern JavaScript (ES6 via Webpack + Babel, testing with Jest, linting with ESLint, and formatting with Prettier), the ease and power of Serverless, and a few handy helpers (like functions for handling warm functions and response helpers). Once installed, you can create and deploy functions with the latest ES6 features in minutes, with linting and formatting baked in.

The-cost-of-transpiling-es2015-in-2016 - Investigating the overhead cost of compiled es2015

  •    Javascript

There are a lot of tools to compile es2015 to es5. When choosing your compile stack you should be aware that tools that perform tree shaking and topological sorts of your code dependencies will result in smaller code bundles and faster js execution times. With the recent es2015 boom 2016 javascript developers have a myriad of combinatorial choices when it comes to writing es2015 and compiling that code to es5 or lower. From closure compiler to browserify to uglify to webpack it is hard to know what is the best for compiling es2015 to run in browsers today.

polished - A lightweight toolset for writing styles in JavaScript โœจ

  •    Javascript

When โœจ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size. โœจ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

redux-actions - Flux Standard Action utilities for Redux.

  •    Javascript

The npm package provides a CommonJS build for use in Node.js, and with bundlers like Webpack and Browserify. It also includes an ES modules build that works well with Rollup and Webpack2's tree-shaking. The UMD build exports a global called window.ReduxActions if you add it to your page via a <script> tag. We don’t recommend UMD builds for any serious application, as most of the libraries complementary to Redux are only available on npm.

webpack-blocks - ๐Ÿ“ฆ Configure webpack using functional feature blocks.

  •    Javascript

Functional building blocks for your webpack config: easier way to configure webpack and to share configuration between projects.Ready to use blocks to configure popular tools like Babel, PostCSS, Sass, TypeScript, etc., as well as best practices like extracting CSS — all with just one line of configuration.

babel-loader - ๐Ÿ“ฆ Webpack plugin for Babel

  •    Javascript

This package allows transpiling JavaScript files using Babel and webpack.Notes: Issues with the output should be reported on the babel issue tracker.

minimal-react-starter - As minimal a react starter as you can get

  •    Javascript

A starter project with React, Babel, and Webpack. This starter is as minimal as possible while still including Babel and Webpack.