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。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM