zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    C# 课堂总结2-数据类型及转换方式
    C# 课堂总结1-二进制转换
    C++
    C++ 程序设计语言
    VS编译器问题总结
    go 笔记
    SIP协议 会话发起协议(二)
    SIP协议 会话发起协议(一)
    201707 一些好的文章
    编程拾穗
  • 原文地址:https://www.cnblogs.com/ztwBlog/p/6193369.html
Copyright © 2011-2022 走看看