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. ...
随机推荐
- python文本过滤
#encoding:UTF-8 import re temp = "想做/ 兼_职/学生_/ 的 .加,我Q: 8 8. 8 8. !!?? 8 8 .8. 8. 8 有,惊,喜,哦&quo ...
- Switch图形练习
//package IfAndSwitchs;import java.util.Scanner; public class Mianji { public static void main(Strin ...
- Linux——【转】gcc编译与gdb调试简要步骤
原文:gcc编译与gdb调试简要步骤 一.Linux程序gcc编译步骤: Gcc编译过程主要的4个阶段: l 预处理阶段,完成宏定义和include文件展开等工作:(.i) l 根据编译参数进行不同程 ...
- storm启动过程之源码分析
TopologyMaster: 处理拓扑的一些基本信息和工作,比如更新心跳信息,拓扑指标信息更新等 NimbusServer: ** * * NimbusServer work flow: 1. ...
- Iframe 知识点总结
JS刷新框架外页面七种实现代码: 1. window.parent.frames[1].location.reload(); 2. window.parent.frames.bottom.locati ...
- Linq Group By
TableA { Id int, Name string, Group int Score int } 从 Id Name Group Score 1 张三 A 70 2 李四 A 80 3 王五 ...
- Diwali
转帖 今天是印度新年(Diwali), 全公司庆祝,午饭不要钱 一.不到美国不知道,三人行必有我师,二人行必有老印.. 一大早“春眠不觉晓,处处闻老印”:晚上遛个弯“举头望明月,低头见老印”:到山 ...
- Kafka的安装和部署及测试
1.简介 大数据分析处理平台包括数据的接入,数据的存储,数据的处理,以及后面的展示或者应用.今天我们连说一下数据的接入,数据的接入目前比较普遍的是采用kafka将前面的数据通过消息的方式,以数据流的形 ...
- 《java集合概述》
JAVA集合概述: Collection: |---List有序的:通过索引就可以精确的操作集合中的元素.元素是可以重复的. List提供了增删改查的动作. 增加add(element) add(in ...
- kafka 订单应用需求
kafka的介绍就不说了,网上会找到一大堆. 为了公司做报表需要对卡券订单的销售情况做总结,所以每次下单的时候都要给卡券活动模块传递一次消息,并把订单的信息发送给活动,活动做相应的数据操作,因为数据量 ...