说明
玩转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下的效果
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CMxMzN3QGOwETYiRzY5MmZyYzXxEDN0UTM3EzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
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')
)