说明
玩转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') )
