在Rollup
的官方文档中提到了Rollup
具有TreeShaking
能力。
TreeShaking
:
它是目前前端中很多构建工具都有的一个特性,主要是对我们一些并未使用到的代码进行剔除,让我们打包后的代码体积更小,包含最少的内容。
Rollup
的Tree Shaking
原理:
利用显式的 import
和 export
语句静态分析
你导入的代码,并将排除任何实际上没有使用的内容。主要的一个方式还是通过AST抽象语法分析树
去提取和剔除。
代码实际验证
// logger.js
export const log = msg => {
console.log('--------INFO--------')
console.log(msg)
console.log('--------INFO--------')
}
export const error = msg => {
console.log('--------error--------')
console.log(msg)
console.log('--------error--------')
}
// message.js
export default {
hi: 'Hello world'
}
// index.js
// 导入模块成员
import { log } from "./logger";
import message from "./message";
// 使用模块成员
const msg = message.hi
log((msg))
实际打包效果: