Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update how-to-do-proper-tree-shaking-in-webpack-2.md #2100

Merged
merged 2 commits into from
Aug 22, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions TODO/how-to-do-proper-tree-shaking-in-webpack-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ console.log(new SportsCar(new __WEBPACK_IMPORTED_MODULE_0__engine__["a" /* V8Eng

Webpack 用注释 */\*unused harmony export V6Engine\*/* 将未使用的类和函数标记下来,用 */\*harmony export (immutable)\*/ __webpack_exports__[“a”] = V8Engine;* 来标记用到的。你应该会问未使用的代码怎么还在?tree-shaking 没有生效吗?

#### 移除未使用代码(Dead code elimination) vs 包含已使用代码(live code inclusion)
#### 移除未使用代码(Dead code elimination)vs 包含已使用代码(live code inclusion)

背后的原因是:Webpack 仅仅标记未使用的代码(而不移除),并且不将其导出到模块外。它拉取所有用到的代码,将剩余的(未使用的)代码留给像 UglifyJS 这类压缩代码的工具来移除。UglifyJS 读取打包结果,在压缩之前移除未使用的代码。通过这一机制,就可以移除未使用的函数 *getVersion* 和类 *V6Engine*

Expand Down Expand Up @@ -231,15 +231,15 @@ plugins: [

#### 总结

通过 tree-shaking 你可以相当程度上减少应用的体积。Webpack 2 内置支持它,但其机制并不同于 Rollup。它会包含所有的代码,标记未使用的函数和函数,以便压缩工具能够移除。这就是对所有代码都进行 tree-shake 的困难之处。使用默认的压缩工具 UglifyJS,它仅移除未使用的函数和变量;Babili 支持 ES6,可以用它来移除类。我们还必须特别注意第三方模块发布的方式是否支持 tree-shaking。
通过 tree-shaking 你可以相当程度上减少应用的体积。Webpack 2 内置支持它,但其机制并不同于 Rollup。它会包含所有的代码,标记未使用的函数和函数,以便压缩工具能够移除。这就是对所有代码都进行 tree-shake 的困难之处。使用默认的压缩工具 UglifyJS,它仅移除未使用的函数和变量;Babili 支持 ES6,可以用它来移除(未使用的)类。我们还必须特别注意第三方模块发布的方式是否支持 tree-shaking。

希望这篇文章阐述了 Webpack tree-shaking 背后的原理,并为您提供了克服困难的思路
希望这篇文章为您清楚阐述了 Webpack tree-shaking 背后的原理,并提供了克服困难的思路

实际例子请访问 [Babel](https://github.com/blacksonic/babel-webpack-tree-shaking)[Typescript](https://github.com/blacksonic/typescript-webpack-tree-shaking)

---

*感谢阅读!喜欢本文请点击[原文](https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21)中的 ❤,然后分享到社交媒体上。欢迎关注 [*Medium*](https://medium.com/@blacksonic86)[*Twitter*](https://twitter.com/blacksonic86) 阅读更多有关 Javascript 的内容!*
*感谢阅读!喜欢本文请点击[原文](https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21)中的 ❤,然后分享到社交媒体上。欢迎关注 [Medium](https://medium.com/@blacksonic86)[Twitter](https://twitter.com/blacksonic86) 阅读更多有关 Javascript 的内容!*


---
Expand Down