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的解决方案。的更多相关文章

  1. [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 ...

  2. Webpack 的 Tree Shaking

    为什么要使用 Tree Shaking? 当从某文件模块中导出(某一个或几个变量.函数.对象等),然而这个文件模块还有许多其它(我们这次并不需要)的导出,webpack会不管三七二十一简单粗暴的将整个 ...

  3. Webpack 4 Tree Shaking 终极优化指南

    几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少 ...

  4. 深入研究webpack之Tree Shaking相关属性sideEffects用处

    Tree Shaking我原来也只是了解,这次碰巧深入研究了下,就写个博客记录一下,网上有很多讲Tree Shaking的,我写的这篇跟他们侧重点不一样 Tree Shaking相关的基础知识 1 w ...

  5. webpack和tree shaking和rollup

    http://blog.csdn.net/haodawang/article/details/77199980 tree shaking只对es模块生效,在打包tyscript模块是要使用tsc编译器 ...

  6. Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...

  7. webpack(6)-模块热替代&tree shaking

    模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...

  8. 配置Tree Shaking来减少JavaScript的打包体积

    译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...

  9. 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)

    阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. ...

随机推荐

  1. #1000 A + B (hihoCoder)

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 求两个整数A+B的和 输入 输入包含多组数据.每组数据包含两个整数A(1 ≤ A ≤ 100)和B(1 ≤ A ≤ 100) ...

  2. 执行时关闭标识位 FD_CLOEXEC 的作用

    首先先回顾 apue 中对它的描述: ① 表示描述符在通过一个 exec 时仍保持有效(书P63,3.14节 fcntl 函数,在讲 F_DUPFD 时顺便提到) ② 对打开文件的处理与每个描述符的执 ...

  3. IE 文档模式

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv= ...

  4. CALayer笔记

    1.Core Animation是跨平台的,支持IOS和Mac OS X环境 2.核心动画操作的对象不是UIView而是CALayer,CALayer是核心动画的基础, 可以做圆角.阴影.边框等效果 ...

  5. SQL Server 在数据库中查找字符串(不知道表名的情况下 查找字符串)

    declare @key varchar(30)set @key = '广州' --替换为要查找的字符串DECLARE @tabName VARCHAR(40),@colName VARCHAR(40 ...

  6. Thinkphp 带查询条件数据分页

    //查询条件中如果有中文 $keyword= urldecode(I("request.keyword")); if ($keyword!=""){ $Mode ...

  7. 快速了解IOC的几种姿势

    一.首先我们了解IOC如何注入的几种姿势 构造函数注入(Constructor Injection) Ioc容器会智能的选择和调用合适的构造函数以创建依赖的对象.如果被选择的构造函数具有相应的参数,I ...

  8. 0526 Sprint1个人总结 & 《构建之法》第八、九、十章

    Sprint1的个人总结: 我是老人组的成员,我们是做一款四则运算训练的软件.然后我是接了界面设计的任务,所以我任务将会是sprint1中相对重一点的一方.我的感觉是,界面要做得充满童趣,毕竟我们的软 ...

  9. Qt5.5中,使MainWindow初始为全屏

    MainWindow w; w.showMaximized(); 实例化后,初始显示设置为最大格式即可!

  10. 探索软件工程道路上的我III (Θ∀Θ#)

    github地址:https://github.com/JUNYU217/2016-03-08 开发语言:Java 开发工具:UltraEdit || 为月末了,网费欠了...很抱歉的拖了那么久的作业 ...