ES6编译成ES5后,代码为何如此巨大?



 class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}

我用webpack中的babel-loader编译上面的一段es6代码,编译的后的文件竟然有2万多行!着实把我吓了一跳,是不是我配置有问题?我都不敢用es6了,希望知道的帮忙解答一下,谢谢!

图片描述

webpack配置文件如下截图:
图片描述

ecmascript-6 webpack es6

无邪D试炼者 10 years ago

1. Iterators + For..Of 必须引入Babel polyfill。这个官方文档上有
2. entry 里的前两个,都是开发时用的,生产环境要去掉。
3.最后生成的文件里包括css的代码,这个你自己要评估下有多大(抽取css代码可以看一下 extract-text-webpack-plugin )
4.webpack 本身会加一下代码来支持模块化
5.从你的截图看, react 的代码都被打包进去了, react 比较大。

Trium answered 10 years ago

react-hot大概是因为有这个东西吧,HotModuleReplacementPlugin也会在bundle里加许多代码

狙击秒卫星 answered 10 years ago

Your Answer