webpack2的Tree sharking,你值得拥有

在2017年2月,webpack官方终于将npm上webpack的latest版本更新到了webpack2,这意味着以后我们默认执行npm install webpack的时候默认安装就是webpack2,这也意味着webpack2已经成熟,准备好替换原先的1版本,终于,这个时代的前端构建巨头,迎来了有史以来的最大一次更新。

这个版本的webpack默认支持import export方式的模块加载方式,这给webpack带来了一项强大的功能:Tree shaking。这项功能有什么好处呢?我们来看下面这个例子:

// a.js
export function add(num1, num2) {
  return num1 + num2
}

export function reduce(num1, num2) {
  return num1 - num2
}

export default {
  add: add,
  reduce: reduce
}

// b.js
import {add} from './a.js'

console.log(add(1, 2))

这时候我们用webpack打包b.js,在打包后的文件中会出现这样的代码:

webpack

这里有个/* unused harmony export reduce */,有了这句话,在我们使用webpack的UglifyJsPlugin的时候,就会将reduce函数的代码删除。需要注意的是,如果我们在a.js中加入export default {add, reduce},在b.js中通过import a from './a.js',来调用,那么就无法使用tree sharking,这时候我们可以怎么办呢?可以这么写import * as a from './a.js'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容