Richard Fridrich: Třesení stromem v JavaScriptu

calculator.js
export function square (n) {
return n * n;
}
export function cube (n) {
return n * n * n;
}

index.js
import {cube} from './calculator.js'
console.log(cube(10));

.babelrc
{
"presets": ["latest"]
}

webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: './lib/'
},
module: {
rules: [
{
test: /.js$/,
loaders: ['babel-loader']
}
]
}
};

lib/index.js
. . .
}([ function(module, exports, __webpack_require__) {
"use strict";
function square(n) {
return n * n;
}
function cube(n) {
return n * n * n;
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.square = square, exports.cube = cube;
},
. . .

babel export
"use strict";
Object.defineProperty(exports, "__esModule", {value: true});
exports.square = square;
exports.cube = cube;
function square(n) {return n * n;}
function cube(n) {return n * n * n;}

.babelrc
{
"presets": [
[
"latest",
{
"es2015": {
"modules": false
}
}
]
]
}

babel export (no module)
"use strict";
function square(n) {return n * n;}
function cube(n) {return n * n * n;}

webpack.config.js
var UglifyJsPlugin =
require('uglifyjs-webpack-plugin');
module.exports = {
. . .
plugins: [
new UglifyJsPlugin({
compress: {dead_code: true}
})
]
};

> webpack
Hash: f177e58750d74d4d18e1
Version: webpack 2.2.1
Time: 687ms
Asset Size Chunks Chunk Names
index.js 1.86 kB 0 [emitted] main
[0] ./src/calculator.js 121 bytes {0} [built]
[1] ./src/index.js 63 bytes {0} [built]
WARNING in index.js from UglifyJs
Dropping unused function square [index.js:76,9]

WARNING in index.js from UglifyJs
Dropping unused function square [index.js:76,9]

lib/index.js (no shaking)
. . .
}([ function(module, exports, __webpack_require__) {
"use strict";
function square(n) {
return n * n;
}
function cube(n) {
return n * n * n;
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.square = square, exports.cube = cube;
},
. . .

lib/index.js (tree shaking)
. . .
}([ function(module, __webpack_exports__, __webpack_require__) {
"use strict";
function cube(n) {
return n * n * n;
}
__webpack_exports__.a = cube;
},
. . .

Babel
./module/*.js
Webpack
./lib/index.js

package.json
{
. . .
"scripts": {
"build:classic": "webpack",
"build:modern": "babel src -d module"
}
}

package.json
{
. . .
"scripts": {
"build:classic": "webpack",
"build:modern": "babel src -d module",
"build": "npm run build:classic && npm run build:modern"
}
}

package.json
{
. . .
"main": "./lib/index.js"
}

package.json
{
. . .
"main": "./lib/index.js",
"module": "./module/index.js",
"webpack": "./module/index.js",
"jsnext:main": "./module/index.js"
}
*.mjs
(node)

github.com/fczbkk/develcz-
2017-tree-shaking

Richard Fridrich: Třesení stromem v JavaScriptu

More Related Content

What's hot (20)

More from Develcz (20)

Recently uploaded (20)

Richard Fridrich: Třesení stromem v JavaScriptu

Editor's Notes