webpack4实践笔记10 关于JS Tree Shaking
本系列代码放在 github 上:
webpack4系列实践代码如果本系列实践教程对你有帮助,欢迎给个
github star
哦!
1.什么是 tree shaking
借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除掉没有被引用的模块,从而减少包的大小,缩小应用的加载时间,从而提高性能体验。
2.需配合 UglifyJSPlugin
来实现 tree shaking
UglifyJSPlugin
的作用在于删除未被引用代码以及压缩代码。
从 webpack 4 开始,只需将 "mode"
设置为 "production"
模式,即可开启 UglifyJSPlugin
的功能。
详情可参考官方 Tree Shaking 文档:https://www.webpackjs.com/guides/tree-shaking/
3.目录结构
1 | // `--` 代表目录, `-` 代表文件 |
module.js
1 | export const sayHello1 = () => { |
app.js
1 | // 只导入了 sayHello1 ,观察打包后的 bundle 代码,移除了 sayHello2 和 sayHello3 的代码 |
4.编写webpack配置文件
webpack.config.js
1 | const path = require("path"); |
5.执行打包命令
(默认你已经安装了全局 webpack 以及 webpack-cli )
1 | webpack |
打包成功后,会在 demo08 目录下生成 dist/app.bundle.js
6.验证 tree shaking 是否生效
打开 app.bundle.js 文件,
发现查找不到 Hi I want to say hello2
和 Hi I want to say hello3
,
说明 Tree Shaking 生效了。
7.源码地址
demo 代码地址: https://github.com/SimpleCodeCX/simple-webpack-demos/tree/master/demo10-tree-shaking
仓库代码地址(及目录): https://github.com/SimpleCodeCX/simple-webpack-demos
参考文档:tree shaking
本文作者 : Simple
原文链接 : https://simplecodecx.github.io/blog/20190311/87d97ce2.html
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!