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. ...
随机推荐
- 一张关于docker版本的图
今天安装了windows内测版的docker,的确是是把vitualbox换成了hyper-v,如左图,server的os 还是linux.不过之前在nanoserver上装的docker 也的确是原 ...
- 【译】Android 6.0 Changes (机翻加轻微人工校对)
Android 6.0 Changes In this document Runtime Permissions Doze and App Standby Apache HTTP Client Rem ...
- php 概率算法(转)
例:function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 for ...
- Wen前端性能优化
Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...
- maven 下载 源码和javadoc 命令
摘要:我们在写代码时候,往往是想查看一下源码,看看源码的一些细节内容.一般情况下,在IDE(如eclipse)中近仅仅只需按住ctrl+ 点击对应的方法即可进入对应的源码部分.但是有些时候很多依赖项并 ...
- sis9280触摸ic 基于rk3288 的安卓4.4的 多点触摸
前言:sis提供的驱动ic.基于rk3288的安卓系统.亲眼看到人家完成一次移植.很激动的记下一些东西..虽然我看不懂.其实现在的工作也不需要看懂.叫人协助就好,只需要知道有这个东西. 1linux下 ...
- Java并发编程学习笔记(三)——对象的组合
重要概念: 1.在设计线程安全类的过程中,需要包含以下三个基本要素: (1)找出构成对象状态的所有变量. (2)找出约束状态变量的不变性条件. (3)建立对象状态的并发访问管理策略. 2.
- linux一些常用命令
本人是linux小白,因项目接触linux不久,收集了一些常用的linux命令,希望对后来者有用. --列出/var/data目录下按A-Z字母排序的前100个文件ls /var/data |sort ...
- 【Python】二分查找算法
二分查找:在一段数字内,找到中间值,判断要找的值和中间值大小的比较.如果中间值大一些,则在中间值的左侧区域继续按照上述方式查找.如果中间值小一些,则在中间值的右侧区域继续按照上述方式查找.直到找到我们 ...
- c++11新的小猫腻
1.void*指针的使用,平时见得也很多了,至于为什么使用void* 指针,很多人有自己的见解,反正普通指针轻轻松松的转向void * 指针,但是void*指针转向其他的指针都要采用强制转换的. 2. ...