Skip to content

Commit 6307ed7

Browse files
sokrasokra
committed
Added experimental usage tracking of ES6 modules and example
1 parent cf469e4 commit 6307ed7

29 files changed

Lines changed: 557 additions & 52 deletions

‎examples/harmony-unused/README.md‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step than removes the declarations because they are ununsed.
2+
3+
In this example only `add` and `multiply` in `./math.js` are used used by the app. `list` is unused and is not included in the minimized bundle (Look for `Array.from` in the minimized bundle).
4+
5+
In addition to that `library.js` simulates an entry point to a big library. `library.js` reexports multiple identifiers from submodules. Often big parts of that is unsed like `abc.js`. Here is visible how the usage information flows from `example.js` through `library.js` into `abc.js` and all declarations in `abc.js` are not included in the minimized bundle (Look for `console.log("a")` in the minimized bundle).
6+
7+
8+
# example.js
9+
10+
``` javascript
11+
import { add } from './math';
12+
import { reexportedMultiply } from "./library";
13+
14+
add(1, 2);
15+
reexportedMultiply(1, 2);
16+
```
17+
18+
# math.js
19+
20+
``` javascript
21+
export function add() {
22+
var sum = 0, i = 0, args = arguments, l = args.length;
23+
while (i < l) {
24+
sum += args[i++];
25+
}
26+
return sum;
27+
}
28+
29+
export function multiply() {
30+
var product = 1, i = 0, args = arguments, l = args.length;
31+
while (i < l) {
32+
product *= args[i++];
33+
}
34+
return product;
35+
}
36+
37+
export function list() {
38+
return Array.from(arguments);
39+
}
40+
```
41+
42+
# library.js
43+
44+
``` javascript
45+
export { a, b, c } from "./abc";
46+
export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
47+
```
48+
49+
# js/output.js
50+
51+
``` javascript
52+
/******/ (function(modules) { // webpackBootstrap
53+
/******/ // The module cache
54+
/******/ var installedModules = {};
55+
56+
/******/ // The require function
57+
/******/ function __webpack_require__(moduleId) {
58+
59+
/******/ // Check if module is in cache
60+
/******/ if(installedModules[moduleId])
61+
/******/ return installedModules[moduleId].exports;
62+
63+
/******/ // Create a new module (and put it into the cache)
64+
/******/ var module = installedModules[moduleId] = {
65+
/******/ exports: {},
66+
/******/ id: moduleId,
67+
/******/ loaded: false
68+
/******/ };
69+
70+
/******/ // Execute the module function
71+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
72+
73+
/******/ // Flag the module as loaded
74+
/******/ module.loaded = true;
75+
76+
/******/ // Return the exports of the module
77+
/******/ return module.exports;
78+
/******/ }
79+
80+
81+
/******/ // expose the modules object (__webpack_modules__)
82+
/******/ __webpack_require__.m = modules;
83+
84+
/******/ // expose the module cache
85+
/******/ __webpack_require__.c = installedModules;
86+
87+
/******/ // on error function for async loading
88+
/******/ __webpack_require__.oe = function(err) { throw err; };
89+
90+
/******/ // __webpack_public_path__
91+
/******/ __webpack_require__.p = "js/";
92+
/******/ // Load entry module and return exports
93+
/******/ return __webpack_require__(__webpack_require__.s = 3);
94+
/******/ })
95+
/************************************************************************/
96+
/******/ ([
97+
/* 0 */
98+
/*!*****************!*\
99+
!*** ./math.js ***!
100+
\*****************/
101+
/***/ function(module, exports, __webpack_require__) {
102+
103+
/* harmony export */function add() {
104+
var sum = 0, i = 0, args = arguments, l = args.length;
105+
while (i < l) {
106+
sum += args[i++];
107+
}
108+
return sum;
109+
}/* harmony export */ Object.defineProperty(exports, "add", {configurable: false, enumerable: true, get: function() { return add; }});
110+
111+
/* harmony export */function multiply() {
112+
var product = 1, i = 0, args = arguments, l = args.length;
113+
while (i < l) {
114+
product *= args[i++];
115+
}
116+
return product;
117+
}/* harmony export */ Object.defineProperty(exports, "multiply", {configurable: false, enumerable: true, get: function() { return multiply; }});
118+
119+
/* harmony export */function list() {
120+
return Array.from(arguments);
121+
}/* ununsed harmony export list */;
122+
123+
124+
/***/ },
125+
/* 1 */
126+
/*!********************!*\
127+
!*** ./library.js ***!
128+
\********************/
129+
/***/ function(module, exports, __webpack_require__) {
130+
131+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__abc__ = __webpack_require__(/*! ./abc */ 2);/* ununsed harmony reexport c */;/* ununsed harmony reexport b */;/* ununsed harmony reexport a */;
132+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__math__ = __webpack_require__(/*! ./math */ 0);/* harmony reexport */ Object.defineProperty(exports, "reexportedMultiply", {configurable: false, enumerable: true, get: function() { return __WEBPACK_IMPORTED_MODULE_1__math__["multiply"]; }});/* ununsed harmony reexport reexportedAdd */;
133+
134+
/***/ },
135+
/* 2 */
136+
/*!****************!*\
137+
!*** ./abc.js ***!
138+
\****************/
139+
/***/ function(module, exports, __webpack_require__) {
140+
141+
/* harmony export */function a() { console.log("a"); }/* ununsed harmony export a */;
142+
/* harmony export */function b() { console.log("b"); }/* ununsed harmony export b */;
143+
/* harmony export */function c() { console.log("c"); }/* ununsed harmony export c */;
144+
145+
146+
/***/ },
147+
/* 3 */
148+
/*!********************!*\
149+
!*** ./example.js ***!
150+
\********************/
151+
/***/ function(module, exports, __webpack_require__) {
152+
153+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__math__ = __webpack_require__(/*! ./math */ 0);
154+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__library__ = __webpack_require__(/*! ./library */ 1);
155+
156+
/* harmony import */ __WEBPACK_IMPORTED_MODULE_0__math__["add"](1, 2);
157+
/* harmony import */ __WEBPACK_IMPORTED_MODULE_1__library__["reexportedMultiply"](1, 2);
158+
159+
160+
/***/ }
161+
/******/ ]);
162+
```
163+
164+
# js/output.js
165+
166+
``` javascript
167+
!function(e){function r(t){if(n[t])return n[t].exports;var u=n[t]={exports:{},id:t,loaded:!1};return e[t].call(u.exports,u,u.exports,r),u.loaded=!0,u.exports}var n={};return r.m=e,r.c=n,r.oe=function(e){throw e},r.p="js/",r(r.s=3)}([function(e,r,n){function t(){for(var e=0,r=0,n=arguments,t=n.length;t>r;)e+=n[r++];return e}function u(){for(var e=1,r=0,n=arguments,t=n.length;t>r;)e*=n[r++];return e}Object.defineProperty(r,"add",{configurable:!1,enumerable:!0,get:function(){return t}}),Object.defineProperty(r,"multiply",{configurable:!1,enumerable:!0,get:function(){return u}})},function(e,r,n){var t=(n(2),n(0));Object.defineProperty(r,"reexportedMultiply",{configurable:!1,enumerable:!0,get:function(){return t.multiply}})},function(e,r,n){},function(e,r,n){var t=n(0),u=n(1);t.add(1,2),u.reexportedMultiply(1,2)}]);
168+
```
169+
170+
# Info
171+
172+
## Uncompressed
173+
174+
```
175+
Hash: 4a88e85220137007208d
176+
Version: webpack 1.12.2
177+
Time: 139ms
178+
Asset Size Chunks Chunk Names
179+
output.js 3.98 kB 0 [emitted] main
180+
chunk {0} output.js (main) 728 bytes [rendered]
181+
> main [3] ./example.js
182+
[0] ./math.js 366 bytes {0} [built]
183+
harmony import ./math [1] ./library.js 2:0-78
184+
harmony import ./math [3] ./example.js 1:0-29
185+
[1] ./library.js 112 bytes {0} [built]
186+
harmony import ./library [3] ./example.js 2:0-47
187+
[2] ./abc.js 129 bytes {0} [built]
188+
harmony import ./abc [1] ./library.js 1:0-32
189+
[3] ./example.js 121 bytes {0} [built]
190+
```
191+
192+
## Minimized (uglify-js, no zip)
193+
194+
```
195+
Hash: 4a88e85220137007208d
196+
Version: webpack 1.12.2
197+
Time: 319ms
198+
Asset Size Chunks Chunk Names
199+
output.js 822 bytes 0 [emitted] main
200+
chunk {0} output.js (main) 728 bytes [rendered]
201+
> main [3] ./example.js
202+
[0] ./math.js 366 bytes {0} [built]
203+
harmony import ./math [1] ./library.js 2:0-78
204+
harmony import ./math [3] ./example.js 1:0-29
205+
[1] ./library.js 112 bytes {0} [built]
206+
harmony import ./library [3] ./example.js 2:0-47
207+
[2] ./abc.js 129 bytes {0} [built]
208+
harmony import ./abc [1] ./library.js 1:0-32
209+
[3] ./example.js 121 bytes {0} [built]
210+
211+
WARNING in output.js from UglifyJs
212+
Dropping unused function list [./math.js:17,0]
213+
Side effects in initialization of unused variable __WEBPACK_IMPORTED_MODULE_0__abc__ [./library.js:1,0]
214+
Dropping unused function a [./abc.js:1,0]
215+
Dropping unused function b [./abc.js:2,0]
216+
Dropping unused function c [./abc.js:3,0]
217+
```

‎examples/harmony-unused/abc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function a() { console.log("a"); }
2+
export function b() { console.log("b"); }
3+
export function c() { console.log("c"); }

‎examples/harmony-unused/build.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("../build-common");

‎examples/harmony-unused/example.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { add } from './math';
2+
import { reexportedMultiply } from "./library";
3+
4+
add(1, 2);
5+
reexportedMultiply(1, 2);

‎examples/harmony-unused/library.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { a, b, c } from "./abc";
2+
export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";

‎examples/harmony-unused/math.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function add() {
2+
var sum = 0, i = 0, args = arguments, l = args.length;
3+
while (i < l) {
4+
sum += args[i++];
5+
}
6+
return sum;
7+
}
8+
9+
export function multiply() {
10+
var product = 1, i = 0, args = arguments, l = args.length;
11+
while (i < l) {
12+
product *= args[i++];
13+
}
14+
return product;
15+
}
16+
17+
export function list() {
18+
return Array.from(arguments);
19+
}

‎examples/harmony-unused/template.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step than removes the declarations because they are ununsed.
2+
3+
In this example only `add` and `multiply` in `./math.js` are used used by the app. `list` is unused and is not included in the minimized bundle (Look for `Array.from` in the minimized bundle).
4+
5+
In addition to that `library.js` simulates an entry point to a big library. `library.js` reexports multiple identifiers from submodules. Often big parts of that is unsed like `abc.js`. Here is visible how the usage information flows from `example.js` through `library.js` into `abc.js` and all declarations in `abc.js` are not included in the minimized bundle (Look for `console.log("a")` in the minimized bundle).
6+
7+
8+
# example.js
9+
10+
``` javascript
11+
{{example.js}}
12+
```
13+
14+
# math.js
15+
16+
``` javascript
17+
{{math.js}}
18+
```
19+
20+
# library.js
21+
22+
``` javascript
23+
{{library.js}}
24+
```
25+
26+
# js/output.js
27+
28+
``` javascript
29+
{{js/output.js}}
30+
```
31+
32+
# js/output.js
33+
34+
``` javascript
35+
{{min:js/output.js}}
36+
```
37+
38+
# Info
39+
40+
## Uncompressed
41+
42+
```
43+
{{stdout}}
44+
```
45+
46+
## Minimized (uglify-js, no zip)
47+
48+
```
49+
{{min:stdout}}
50+
```

0 commit comments

Comments
 (0)