Tree-shaking example with Babel and Webpack
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.
-
什么是Tree-shaking 所谓Tree-shaking就是‘摇’的意思，作用是把项目中没必要的模块全部抖掉，用于在不同的模块之间消除无用的代码，可列为性能优化的范畴。 Tree-shaking早期由rollup实现，后来webpack2也实现了Tree-shaking的功能，但是至今还不是很完备。至于为什么不完备，可以看一下百度外卖的Tree-shaking原理 Tree-shading原理
-
注：原文发表于 2015年 12月20日，彼时一些相关的技术方案还处于公测或者论证阶段。 Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup de
-
当项目达到一定体积的时候，将代码分成模块可以更加易于我们的管理，但是，当这样做时，我们可能引入了并不需要的代码，而Tree Shaking 就是一种通过消除文件中纹使用的代码来优化体积。 注意：Tree Shaking 只支持对静态引入的模块进行体积优化。 一般 观察下面的代码： //math.js export const add = (a, b) => { console.log( a +
-
一 什么是 Tree-shaking tree-shaking可以理解为通过工具"摇"我们的JS文件，css文件；将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来
-
前言：webpack（很难，没有一定的vue基础，勿学） 一，定义：js模块打包器把所有依赖的文件生成一个图，打包成文件 二，安装： 1.npm init -y初始化项目 2.npm i webpack webpack-cli -D安装 三，配置文件webpack.config.js module.exports = {} 四，核心概念 1.入口 entry 2.出口output：(path 文件
-
一. Tree Shaking 是什么 Tree Shaking中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。 二. 如何开启 webpack 的 Tree Shaking webpack在生产模式（mode: 'production'）下，不会打包进未引用的代码（dead-code）。 1. 开启 Tree Shaking webpack.config.js:
-
意义：去除无用代码(生产优化) 前提：1、必须使用es6模块化的引用 2、mode: 'production' 例： a.js中 export fn1 export fn2 b.js中 import {fn1} from a.js 那么fn2的定义就不会打包 问题：会把只引入但不显示使用的文件shaking掉 例： import './xx.css' import '@babel/pol
-
koa-babel-webpack-boilerplate A simple boilerplate to create REST apps with koa@next (currently 2.0.0-alpha.3) babel (for async, await and stage-2 support) webpack How to use Boilerplate is packed wit
-
webpack-babel-env-deps Find dependencies to transpile with Babel. �� Read the docs! A webpack helper to find dependencies of your project that require transpilation with Babel (and @babel/preset-env)b
-
babel-plugin-webpack-alias This Babel 6 plugin allows you to use webpack aliases and most of webpack resolve features in Babel. This plugin is simply going to take the aliases defined in your webpack
-
DEPREACTED due to lack of support/bug fixes/ new features, project abandoned, please migrate on https://github.com/webpack-contrib/terser-webpack-plugin Babel Minify Webpack Plugin A Webpack Plugin fo
-
webpack-babel-multi-target-plugin This project, inspired by Phil Walton's articleDeploying es2015 Code in Production Today,adds tooling to simplify the additional configuration with aWebpack plugin, B
-
advanced-react-webpack-babel-setup Advanced React with Webpack Setup. How to set it up yourself: Minimal React + Webpack Setup Advanced Webpack Setup ESLint + ESLint + React + Prettier + ESLint Featur