webpack 摇树优化(tree shaking)

摇树优化(tree shaking)

概念

一个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打包到目标文件中去，tree shaking就是只把用到的方法打入目标文件，没有用到的部分在uglify(文件压缩)阶段抹除掉

使用

webpack默认支持，在.babelrc里设置moudles:false即可

production mode的情况下是默认开启的

要求

必须是ES6的语法，CJS的方式不支持（node中的require不支持）

DCE: dead code elimination (无用代码删除)

• 代码不会被执行，不可到达

if(false){
    console.log("哈哈哈哈哈哈")
}

• 代码执行的结果不会被用到

function test() {
   return "返回的结果";
}

// 并没有接收test返回的参数
test();

• 代码只会影响死变量（只写不读）

let a = "哈哈哈"

原理

利用ES6模块的特点

• 只能作为模块顶层语句出现
• import的模块名只能是字符串常量
• import binging是 immutable的

代码擦除： uglify阶段删除无用代码