tree-shaking-example - Tree-shaking of Rambda and Ramda with Webpack and Rollup

  •        20

Example implementation of tree-shaking and dead code elimination of Rambda and Ramda with Webpack and Rollup. Currently the major advantage of Rambda over Ramda is its tree-shaking ability and this repo is the proof of this statement.

https://github.com/selfrefactor/tree-shaking-example

Dependencies:

filesize : ^3.5.11
log : https://github.com/selfrefactor/log#0.6.0
microbundle : ^0.4.4
npm-run-all : ^4.1.2
rambda : ^1.1.4
rambdax : ^0.9.1
ramda : ^0.25.0
uglifyjs-webpack-plugin : ^1.2.5
webpack : ^4.12.0
webpack-cli : ^3.0.4

Tags
Implementation
License
Platform

   




Related Projects

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.

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

  •    Javascript

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.

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.

rambda - Faster alternative to Ramda in just 10kB

  •    Javascript

Currenly Rambda is more tree-shakable than Ramda as you can see in this tree-shaking example. Rambda is generally more performant than Ramda as the benchmarks can prove that.

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.


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.

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.

rollupify - Browserify transform to apply Rollup

  •    Javascript

Browserify transform to apply Rollup, converting ES6/ES2015 modules into one big CommonJS module. This tends to result in smaller bundle sizes, due to Rollup's tree-shaking and scope-hoisting capabilities.

react-redux-typescript-jspm-starter - Futuristic, bundle-free, development environment for building Component-Driven SPA with React, Redux and TypeScript - powered by JSPM (SystemJS & Rollup with tree-shaking)

  •    TypeScript

No module bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using plugin-typescript). Type-checking is disabled for speed and delegated to another process. Enable strictNullChecks with noImplicitAny (compiler flags), to get Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) (Source) which greatly increase your TypeScript experience.

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.

SingleLineShakeAnimation - Shake a view with a single line of code with a non-intrusive extension for UIView, written in Swift

  •    Swift

TLDR; Shake a view with a single line of code with a non-intrusive extension for UIView, with good support for accessability, written in Swift. With this non-intrusive UIView extension, your UIView subclasses can get shaking with very little code. Shaking can be useful to indicate an important action your user needs to perform, for example filling out a form before submitting. Show the user it by gently shaking the needed view to get their attention.

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.

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.

bonsai - Understand the tree of dependencies inside your webpack bundles, and trim away the excess.

  •    Javascript

Trim your javascript dependency tree. The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze.

bosket - Collection of tree view components for front-end frameworks. :deciduous_tree:

  •    Javascript

Bosket is a library of tree views implementations for front-end reactive frameworks. Tree views, which are basically an elegant way to display nested lists, are very versatile and can for example be used as file explorers, menus, table of contents or category lists.

project-explorer - 🎋A CLI tool to create an annotated tree visualization of any project

  •    Javascript

Create a tree visualization of any project with this CLI tool. When ramping people up on an existing codebase, there's often a lot of state they have to understand about the project- where everything is, where everything starts, exceptional files. With this tool, you can generate a visualization of any project, as well modify certain directories to be open, or have notes that people can read through easily. A working example of this exists here. I created this for Vue core off of notes taken at a core meeting as Evan You walked us through some of the file structure.

preact-hn - Demonstration of Preact used to build Hacker News as a PWA.

  •    TypeScript

This is an example of a PWA built using Preact, Webpack, and some small opinions. Please do not think of this as the way to build your application. Instead, view this as an example of some concepts used in modern web applications (sw, h2, h2push). I've focused mostly on first initial load performance, with the small caveat of using Webpack instead of Rollup. I'd like the route based code splitting to provide a extensible model for keeping initial view rendering costs low.