webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。
webpack:
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{warning:true}
})
]
是的,一些dead code 在打包后会被移除.比如没用的varible ,function。
但是classes会被UglifyJs作为side effect,然后跳过它。
我的TypeScript配置tsconfig.json :
compilerOptions:{
target:'es5',
module:'es2015'
.....
}
所以~
typescript=>es5 bundle =>UglifyJs
通过这条途径,classes是不会被删除的。
typescript=>es6 bundle =>UglifyJs
这条途径不行,UglifyJs不支持直接处理ES6文件。
------------------------------------------
好吧,搞了很久,我才找到babel为webpack提供了babili-webpack-plugin这么一个插件。
于是用它直接替换 UglifyJs就好了:
npm install babili-wepback-plugin -save-dev // babel-core >= 6.19.0
npm install babel-core@6.21.0
plugins:[
new require('babili-webpack-plugin')()
]
当然,tsconfig.json中target得设置为es2015(按es5输出,classes还是会存在)。
如此才是真正的tree shaking。
webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。的更多相关文章
- [Webpack 2] Tree shaking with Webpack 2
The less code you can send to the browser, the better. The concept of tree shaking basically says th ...
- Webpack 的 Tree Shaking
为什么要使用 Tree Shaking? 当从某文件模块中导出(某一个或几个变量.函数.对象等),然而这个文件模块还有许多其它(我们这次并不需要)的导出,webpack会不管三七二十一简单粗暴的将整个 ...
- Webpack 4 Tree Shaking 终极优化指南
几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少 ...
- 深入研究webpack之Tree Shaking相关属性sideEffects用处
Tree Shaking我原来也只是了解,这次碰巧深入研究了下,就写个博客记录一下,网上有很多讲Tree Shaking的,我写的这篇跟他们侧重点不一样 Tree Shaking相关的基础知识 1 w ...
- webpack和tree shaking和rollup
http://blog.csdn.net/haodawang/article/details/77199980 tree shaking只对es模块生效,在打包tyscript模块是要使用tsc编译器 ...
- Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...
- webpack(6)-模块热替代&tree shaking
模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...
- 配置Tree Shaking来减少JavaScript的打包体积
译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...
- 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)
阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. ...
随机推荐
- 使用expect脚本语言写一键发布服务(代码发布、所有服务重启)
互联网服务有很多台服务,但是在上线的时候需要将这些服务版本都更新与个个都重启,下面的脚本语言,就是一键发布服务~ 1.在/home/weihu/deploy/ 目录下建下publish .publis ...
- The Nine Indispensable Rules for HW/SW Debugging 软硬件调试之9条军规
I read this book in the weekend, and decided to put the book on my nightstand. It's a short and funn ...
- X3850M2安装CertOS 7 KVM 2--DMMP
1,在DS8000中调整vg为单台服务器.检查另一台服务器内已经没有磁盘信息. 2,在余下的服务器中安装DMMP. 参考:http://edwin-wang.com/2012/08/device-ma ...
- kanboard邮件通知
1. 复制config.default.php为config.php 2. 修改一下内容 define('MAIL_TRANSPORT', 'smtp');define('MAIL_SMTP_HOST ...
- 使用crosswalk优化ionic2应用包
ionic plugin add cordova-plugin-crosswalk-webview --save
- MongoDB学习
最近在学习,参考一线码农的教程 http://www.cnblogs.com/huangxincheng/category/355399.html
- ORACLE各种小指令
清空表中所有记录truncate table et_xxxxxx 删除一条数据 DELETE FROM zhubajie_member.mb_web_login WHERE nickname='m_3 ...
- deProto原型设计工具
现有的原型工具,比如axure rp等等,都或多或少存在一些使用比较复杂的问题.以至于常常属于少数的产品经理的技能型工具. 在业余的时候,自己凭借兴趣开发了这个工具.希望能够以更简便的方法制作一个de ...
- 新手码农浅谈观察者模式(java语言简单实现)
一:什么是观察者模式: 官方定义:定义对象间一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 举个例子,很多人都会订阅天气预报,当气象台获得明天的天气情况( ...
- OPENCV配置 C1083: 无法打开包括文件:“opencv2/opencv.hpp”
本人没实操过C/C++,理论看过不少. 目前出于提升技术的考虑想做OPENCV 配置了2天,总算是配置好了..遇到不少问题. 计算机配置WIN10,用户环境变量配置也郁闷过... JDK等配置方式,配 ...