Skip to content

Commit 7ceac63

Browse files
sokrasokra
committed
add support for pure modules
1 parent 5c489b6 commit 7ceac63

34 files changed

Lines changed: 606 additions & 1 deletion

File tree

‎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/pure-module/README.md‎

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

‎examples/pure-module/build.js‎

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

‎examples/pure-module/example.js‎

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

‎examples/pure-module/node_modules/big-module-pure/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/pure-module/node_modules/big-module-pure/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/pure-module/node_modules/big-module-pure/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/pure-module/node_modules/big-module-pure/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/pure-module/node_modules/big-module-pure/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/pure-module/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)