webpack进阶篇（二十一）：Tree Shaking的使用和原理分析

说明

​​玩转webpack​​课程学习笔记。

tree shaking(摇树优化)

概念：1 个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到 bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在 uglify 阶段被擦除掉。

使⽤：

• webpack 默认⽀持，在 .babelrc ⾥设置 modules: false 即可
• production mode的情况下默认开启

要求：必须是 ES6 的语法，CJS 的⽅式不⽀持

DCE (Dead code elimination)

• 代码不会被执⾏，不可到达
• 代码执⾏的结果不会被⽤到
• 代码只会影响死变量（只写不读）

if (false) {
  console.log('这段代码永远不会执行');
}

Tree-shaking 原理

利⽤ ES6 模块的特点:

• 只能作为模块顶层的语句出现
• import 的模块名只能是字符串常量
• import binding 是 immutable(不可改变的) 的

代码擦除： uglify 阶段删除⽆⽤代码

例子

1、在search文件夹里添加​​tree-shaking.js​​文件

export function kaimo666() {
  return 'this kaimo666';
}
export function kaimo777() {
  return 'this kaimo777';
}

2、在search文件夹里引用​​index.js​​

import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import logo from './images/logo.png';
console.log(logo);
import '../../common/index.js';
import { kaimo666 } from './tree-shaking.js';

class Search extends React.Component {
  render() {
    debugger;
    return <div className="search-text">
      凯小默的博客666
      <img src={ logo } />
    </div>
  }
}

ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)

3、修改配置mode为​​none​​

module.exports = {
  mode: 'none',
}

4、none下的效果

5、修改配置mode为​​production​​

module.exports = {
  mode: 'production',
}

6、production下的效果

7、配置mode为​​production​​​情况下，引用并且使用​​kaimo666​​这个函数

import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import logo from './images/logo.png';
console.log(logo);
import '../../common/index.js';
import { kaimo666 } from './tree-shaking.js';

class Search extends React.Component {
  render() {
    const kaimo = kaimo666();
    return <div className="search-text">
      { kaimo }
      凯小默的博客666
      <img src={ logo } />
    </div>
  }
}

ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)

8、引用并且使用​​kaimo666​​​效果，发现​​kaimo777​​没有引用进来

9、也可以试试添加无用代码打包，不会被打包进去

import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import logo from './images/logo.png';
console.log(logo);
import '../../common/index.js';
import { kaimo666 } from './tree-shaking.js';

// 无用代码
if (false) {
  kaimo666();
}

class Search extends React.Component {
  render() {
    return <div className="search-text">
      凯小默的博客666
      <img src={ logo } />
    </div>
  }
}

ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)