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. ...
随机推荐
- tail 显示文件最后若干行内容
功能:tail命令可以输出文件的尾部内容,默认情况下它显示文件的最后十行.显示每个指定文件的最后10 行到标准输出.若指定了多于一个文件,程序会在每段输出的开始添加相应文件名作为头.如果不指定文件或文 ...
- 一个比较综合的项目--》>图片缓存,下拉刷新等
在办公室电脑(E:\workspace\23\Collections)
- Python开发入门与实战15-IIS部署
15. IIS部署 前面的章节我们完成了基本的业务功能的开发,本章节我们来说说python django项目如何部署到实际的运行环境,完成开发系统的发布工作. Python Django 项目部署发布 ...
- ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...
- 4 多表代替密码之Hill 密码 2实现
该解密方法的KEY 不是一个数或者一段字符串,而是一个矩阵, 比如有个3*3的KEY: 那么如果我们要加密一个长度为N的字符串, 那么把N除以3,分成M个3个字母组成的小段, 对每个小段尽心加密: 1 ...
- java.sql.SQLException: Incorrect string value:
安装好MySQL一定先改字符集 如果没有,改完字符集之后,要把之前数据库重新创建一下.
- Jquery和Javascript 实际项目中写法基础-ajax和json (3)
一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...
- appium+Python真机运行测试demo的方法
appium+Python真机运行测试demo的方法 一, 打开手机的USB调试模式 二, 连接手机到电脑 将手机用数据线连接到电脑,并授权USB调试模式.查看连接的效果,在cmd下运行命 ...
- Discuz对不起,您安装的不是正版应用的解决办法
方法三(2014年新增最简单方法.) .打开/source /function/function_cloudaddons.php这个文件,2.搜索:cloudaddons_validator,3.一般 ...
- 如何消除inline-block元素间间距问题(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...