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. ...
随机推荐
- Also unsere eigene Christian Louboutin Webshop bietet die überragende Christian Louboutin Schuhe uk schiebt zusammen mit kostengünstigen Wert
www.heelschuhe.de, Es ist wirklich eine der Frauen erfordern immer interessant und auch Louboutin Pu ...
- Andriod Studio adb.exe,start-server' failed -- run manually if necessary 解决
首先查看了我的任务管理器,共有三个adb的程序在运行: 错误提示的是 Andriod Studio 中的adb.exe启动失败,于是,去关掉另外两个adb.exe,两分钟左右后,又出现了三个adb. ...
- 初学者的python学习笔记1——作业篇
既然是学习,作业必不可少,其实在看后面讲思路之前还是感觉自己写的不错,但是和后面一对比,感觉实在是想的太片面太肤浅了,还需要太多太多改进的地方. 首先放一下作业要求. 最开始做的时候真的是完全按照字面 ...
- 杭电ACM1002
原题:http://acm.hdu.edu.cn/showproblem.php?pid=1002 #include <stdio.h> #include <string.h> ...
- CodeBlocks配置文件位置
CodeBlock配置混乱,决定重装时,删除程序后,需将配置文件删除. 配置文件位置:C:\Users\Administrator\AppData\Roaming\CodeBlocks
- 配置OpenCV产生flann\logger.h(66): error C4996: 'fopen': This function or variable may be unsafe问题[zz]
使用vs2012/2013配置opencv编译出现问题: 1>------ 已启动生成: 项目: Win32ForOpenCV245, 配置: Debug Win32 ------ 1> ...
- asp.net C#获取程序文件相关信息
代码如下 复制代码 using System.Reflection;using System.Runtime.CompilerServices; //// 有关程序集的常规信息是通过下列// 属性集控 ...
- UE4蓝图编程的第一步
认识UE4蓝图中颜色与变量类型: UE4中各个颜色对应着不同的变量,连接点和连线的颜色都在表示此处是什么类型的变量.对于初学者来说一开始看到那么多连接点, 可能会很茫然,搞不清还怎么连,如果知道了颜色 ...
- JSP自定义标签——调用数据库(通过id号搜索相关信息)
一.创建新表(假设在master数据库下新建) 二.连接数据库 开始-->控制面板-->管理工具-->数据源-->系统DSN-->添加-->SQL Server-- ...
- NSOperationQueue的其他方法
1.设置最大并发数 什么是并发数 同时执行的任务数 比如,同时开3个线程执行3个任务,并发数就是3 最大并发数的相关方法 - (NSInteger)maxConcurrentOperationCo ...