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​

​沒有引用進來

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')
)