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