webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

Posted Jnew

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 [email protected]      

plugins:[
  new require(‘babili-webpack-plugin‘)()   
]

当然,tsconfig.json中target得设置为es2015(按es5输出,classes还是会存在)。

如此才是真正的tree shaking。

    不过得到的是es6文件,也就是还得转一次es5。 - -!

 

以上是关于webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。的主要内容,如果未能解决你的问题,请参考以下文章

tree-shaking还得是rollup,webpack不行?

如何在 Webpack 2 中使用 tree-shaking

Webpack 实现 Tree shaking 的前世今生

第1035期如何在 Webpack 2 中使用 tree-shaking

webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

Webpack 的 Tree Shaking