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. windows8.1下常用编辑器安装配置(emacs/vim/sublime text3)

    一.下载:在emacs:http://mirrors.ustc.edu.cn/gnu/emacs/windows/里下载emacs-24.3-bin-i386.zip.解压到自定目录,双击bin文件夹 ...

  2. windows8.1下php环境搭建及基本配置(php+apache+mysql)

    一.php下载安装:php-5.6.1-Win32-VC11-x64.zip.解压,操作: 1.复制php.ini-production,更名为php.ini 2.在环境变量PATH末尾添加:D:\p ...

  3. MFC-01-Chapter01:Hello,MFC---1.1 Windows 编程模型

    1.1 Windows编程模型 为传统的操作系统编写的程序使用的是过程化模型,即程序从头到尾按顺序执行.例如C程序,从main函数入口开始执行,中间调用不同的函数一直到程序结束返回,这种过程是程序本身 ...

  4. Basic linux command

    1. useradd  解释:添加新用户,在/etc/password文件中添加一行记录. 参数: -g    用于添加账户时指定该账户的私有组,如果不指定-g参数,useradd命令会自动创建与该用 ...

  5. CSS之照片集效果

    代码: <!DOCTYPE html><html><head> <title>照片影集</title> <meta charset=& ...

  6. auto_ptr源码剖析

    /* * Copyright (c) 1997-1999 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  7. 第二章 JavaScript语法·

    javascript代码放置位置: 1.将代码放置在文档<head>标签中的<script>标签之间: 2.将代码存为一个扩展名为.js的独立文件.典型做法是在文档的<h ...

  8. SWFUpload - JQuery上传插件

    首先,大家可以去SWF的官网下载相关Demo或者源码. 官方地址:http://code.google.com/p/swfupload/ 官方Demo:http://demo.swfupload.or ...

  9. 排序系列 之 折半插入排序算法 —— Java实现

    基本思想: 折半插入算法是对直接插入排序算法的改进,排序原理同直接插入算法: 把n个待排序的元素看成一个有序表和一个无序表,开始时有序表中只有一个元素,无序表中有n-1个元素:排序过程即每次从无序表中 ...

  10. 未能加载文件或程序集“XXX”或它的某一个依赖项。参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))

    移除引用,并删除packagede的引用文件.重新导入引用文件和引用~ 如果是电脑异常死机后报这错误, 解决方法 是 删除 C:\WINDOWS\Microsoft.NET\Framework\v4. ...