Skip to content

Commit 6c1831c

Browse files
sokrasokra
authored
Merge branch 'next' into use-set-in-chunks
2 parents 90dc639 + c47bdc6 commit 6c1831c

File tree

113 files changed

+1752
-728
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+1752
-728
lines changed

‎examples/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,9 @@
106106
## Scope Hoisting
107107
[scope-hoisting](scope-hoisting)
108108

109+
## Pure Module
110+
[pure-module](pure-module)
111+
109112
## Source Map
110113
[source-map](source-map)
111114

‎examples/side-effects/README.md‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
This example shows how the `side-effects` flag for library authors works.
2+
3+
The example contains a large library, `big-module`. `big-module` contains multiple child modules: `a`, `b` and `c`. The exports from the child modules are re-exported in the entry module (`index.js`) of the library. A consumer uses **some** of the exports, importing them from the library via `import { a, b } from "big-module"`. According to the EcmaScript spec, all child modules _must_ be evaluated because they could contain side effects.
4+
5+
The `"side-effects": false` flag in `big-module`'s `package.json` indicates that the package's modules have no side effects (on evaluation) and only expose exports. This allows tools like webpack to optimize re-exports. In the case `import { a, b } from "big-module-with-flag"` is rewritten to `import { a } from "big-module-with-flag/a"; import { b } from "big-module-with-flag/b"`.
6+
7+
The example contains two variants of `big-module`. `big-module` has no side-effects flag and `big-module-with-flag` has the side-effects flag. The example client imports `a` and `b` from each of the variants.
8+
9+
After being built by webpack, the output bundle contains `index.js` `a.js` `b.js` `c.js` from `big-module`, but only `a.js` and `b.js` from `big-module-with-flag`.
10+
11+
Advantages:
12+
13+
* Smaller bundles
14+
* Faster bootup
15+
16+
# example.js
17+
18+
``` javascript
19+
import { a as a1, b as b1 } from "big-module";
20+
import { a as a2, b as b2 } from "big-module-with-flag";
21+
22+
console.log(
23+
a1,
24+
b1,
25+
a2,
26+
b2
27+
);
28+
```
29+
30+
# node_modules/big-module/package.json
31+
32+
``` javascript
33+
{
34+
"name": "big-module"
35+
}
36+
```
37+
38+
# node_modules/big-module-with-flag/package.json
39+
40+
``` javascript
41+
{
42+
"name": "big-module-with-flag",
43+
"side-effects": false
44+
}
45+
```
46+
47+
# node_modules/big-module(-with-flag)/index.js
48+
49+
``` javascript
50+
export { a } from "./a";
51+
export { b } from "./b";
52+
export { c } from "./c";
53+
```
54+
55+
# js/output.js
56+
57+
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
58+
59+
``` javascript
60+
/******/ (function(modules) { // webpackBootstrap
61+
/******/ // The module cache
62+
/******/ var installedModules = {};
63+
/******/
64+
/******/ // The require function
65+
/******/ function __webpack_require__(moduleId) {
66+
/******/
67+
/******/ // Check if module is in cache
68+
/******/ if(installedModules[moduleId]) {
69+
/******/ return installedModules[moduleId].exports;
70+
/******/ }
71+
/******/ // Create a new module (and put it into the cache)
72+
/******/ var module = installedModules[moduleId] = {
73+
/******/ i: moduleId,
74+
/******/ l: false,
75+
/******/ exports: {}
76+
/******/ };
77+
/******/
78+
/******/ // Execute the module function
79+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
80+
/******/
81+
/******/ // Flag the module as loaded
82+
/******/ module.l = true;
83+
/******/
84+
/******/ // Return the exports of the module
85+
/******/ return module.exports;
86+
/******/ }
87+
/******/
88+
/******/
89+
/******/ // expose the modules object (__webpack_modules__)
90+
/******/ __webpack_require__.m = modules;
91+
/******/
92+
/******/ // expose the module cache
93+
/******/ __webpack_require__.c = installedModules;
94+
/******/
95+
/******/ // define getter function for harmony exports
96+
/******/ __webpack_require__.d = function(exports, name, getter) {
97+
/******/ if(!__webpack_require__.o(exports, name)) {
98+
/******/ Object.defineProperty(exports, name, {
99+
/******/ configurable: false,
100+
/******/ enumerable: true,
101+
/******/ get: getter
102+
/******/ });
103+
/******/ }
104+
/******/ };
105+
/******/
106+
/******/ // getDefaultExport function for compatibility with non-harmony modules
107+
/******/ __webpack_require__.n = function(module) {
108+
/******/ var getter = module && module.__esModule ?
109+
/******/ function getDefault() { return module['default']; } :
110+
/******/ function getModuleExports() { return module; };
111+
/******/ __webpack_require__.d(getter, 'a', getter);
112+
/******/ return getter;
113+
/******/ };
114+
/******/
115+
/******/ // Object.prototype.hasOwnProperty.call
116+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
117+
/******/
118+
/******/ // __webpack_public_path__
119+
/******/ __webpack_require__.p = "js/";
120+
/******/
121+
/******/ // Load entry module and return exports
122+
/******/ return __webpack_require__(__webpack_require__.s = 4);
123+
/******/ })
124+
/************************************************************************/
125+
```
126+
127+
</details>
128+
129+
``` javascript
130+
/******/ ([
131+
/* 0 */
132+
/*!******************************************!*\
133+
!*** ./node_modules/big-module/index.js ***!
134+
\******************************************/
135+
/*! exports provided: a, b, c */
136+
/*! exports used: a, b */
137+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
138+
139+
"use strict";
140+
/* harmony import */ var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a */1);
141+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _a__WEBPACK_IMPORTED_MODULE_0__["a"]; });
142+
143+
/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./b */2);
144+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "b", function() { return _b__WEBPACK_IMPORTED_MODULE_1__["a"]; });
145+
146+
/* harmony import */ var _c__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./c */3);
147+
148+
149+
150+
151+
152+
/***/ }),
153+
/* 1 */
154+
/*!**************************************!*\
155+
!*** ./node_modules/big-module/a.js ***!
156+
\**************************************/
157+
/*! exports provided: a */
158+
/*! exports used: a */
159+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
160+
161+
"use strict";
162+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return a; });
163+
const a = "a";
164+
165+
166+
/***/ }),
167+
/* 2 */
168+
/*!**************************************!*\
169+
!*** ./node_modules/big-module/b.js ***!
170+
\**************************************/
171+
/*! exports provided: b */
172+
/*! exports used: b */
173+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
174+
175+
"use strict";
176+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return b; });
177+
const b = "b";
178+
179+
180+
/***/ }),
181+
/* 3 */
182+
/*!**************************************!*\
183+
!*** ./node_modules/big-module/c.js ***!
184+
\**************************************/
185+
/*! exports provided: c */
186+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
187+
188+
"use strict";
189+
/* unused harmony export c */
190+
const c = "c";
191+
192+
193+
/***/ }),
194+
/* 4 */
195+
/*!********************!*\
196+
!*** ./example.js ***!
197+
\********************/
198+
/*! exports provided: */
199+
/*! all exports used */
200+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
201+
202+
"use strict";
203+
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
204+
/* harmony import */ var big_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! big-module */0);
205+
/* harmony import */ var big_module_with_flag__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! big-module-with-flag */5);
206+
/* harmony import */ var big_module_with_flag__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! big-module-with-flag */6);
207+
208+
209+
210+
console.log(
211+
big_module__WEBPACK_IMPORTED_MODULE_0__["a"],
212+
big_module__WEBPACK_IMPORTED_MODULE_0__["b"],
213+
big_module_with_flag__WEBPACK_IMPORTED_MODULE_1__["a"],
214+
big_module_with_flag__WEBPACK_IMPORTED_MODULE_2__["a" /* b */]
215+
);
216+
217+
218+
/***/ }),
219+
/* 5 */
220+
/*!************************************************!*\
221+
!*** ./node_modules/big-module-with-flag/a.js ***!
222+
\************************************************/
223+
/*! exports provided: a */
224+
/*! exports used: a */
225+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
226+
227+
"use strict";
228+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return a; });
229+
const a = "a";
230+
231+
232+
/***/ }),
233+
/* 6 */
234+
/*!************************************************!*\
235+
!*** ./node_modules/big-module-with-flag/b.js ***!
236+
\************************************************/
237+
/*! exports provided: b */
238+
/*! exports used: b */
239+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
240+
241+
"use strict";
242+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return b; });
243+
const b = "b";
244+
245+
246+
/***/ })
247+
/******/ ]);
248+
```
249+
250+
# Info
251+
252+
## Uncompressed
253+
254+
```
255+
Hash: 0f036598352d4d3caffa
256+
Version: webpack 3.5.6
257+
Asset Size Chunks Chunk Names
258+
output.js 6.2 kB 0 [emitted] main
259+
Entrypoint main = output.js
260+
chunk {0} output.js (main) 342 bytes [entry] [rendered]
261+
> main [4] ./example.js
262+
[4] ./example.js 149 bytes {0} [built]
263+
[no exports]
264+
+ 6 hidden modules
265+
```
266+
267+
## Minimized (uglify-js, no zip)
268+
269+
```
270+
Hash: 0f036598352d4d3caffa
271+
Version: webpack 3.5.6
272+
Asset Size Chunks Chunk Names
273+
output.js 1.05 kB 0 [emitted] main
274+
Entrypoint main = output.js
275+
chunk {0} output.js (main) 342 bytes [entry] [rendered]
276+
> main [4] ./example.js
277+
[4] ./example.js 149 bytes {0} [built]
278+
[no exports]
279+
+ 6 hidden modules
280+
```

‎examples/side-effects/build.js‎

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

‎examples/side-effects/example.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { a as a1, b as b1 } from "big-module";
2+
import { a as a2, b as b2 } from "big-module-with-flag";
3+
4+
console.log(
5+
a1,
6+
b1,
7+
a2,
8+
b2
9+
);

‎examples/side-effects/node_modules/big-module-with-flag/a.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/side-effects/node_modules/big-module-with-flag/b.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/side-effects/node_modules/big-module-with-flag/c.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/side-effects/node_modules/big-module-with-flag/index.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/side-effects/node_modules/big-module-with-flag/package.json‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/side-effects/node_modules/big-module/a.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)