小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Rollup从0到1上手前端组件库开发 | tree-shaking 机制

上文回顾

tree-shaking 概念

在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

实操

自己写一个模块

cd src
touch plugin.js

const a = 1
const b = 2

function random() {
    console.log('random')
}

export default {
    a,
    b,
    random
}

vim index.js

import * as data from './plugin'

console.log(data.default.random, data.default.a, data.default.b)

export default random

通过 npx babel-node ./src/index.js 查看运行结果

> [Function: random] 1 2

查看打包结果 dist/payfun.rollbear.dev.es.js

const a = 1;
const b = 2;

function random() {
    console.log('random');
}

var plugin = {
    a,
    b,
    random
};

console.log(plugin.random, plugin.a, plugin.b);

var index = plugin.random;

export default index;

目前的代码是没有减少代码的

vim index.js

import * as data from './plugin'

console.log(data.default.random)

export default data.default.random

再次查看打包结果 dist/payfun.rollbear.dev.es.js

const a = 1;
const b = 2;

function random() {
    console.log('random');
}

var plugin = {
    a,
    b,
    random
};

console.log(plugin.random);

var index = plugin.random;

export default index;

虽然 a 和 b 没有使用到, 但是依然会打包进来

所以这个时候 tree-shaking 是没有办法实现的 import * as data from './plugin' export default{}

那么如何触发 Tree-Shaking呢?

输出使用 export
输入使用 import (xxx) from 'xxx'
举个例子

vim plugin.js

export const a = 1
export const b = 2

export function random() {
    console.log('random')
}

vim index.js import a,b 但是未使用

import {random,a,b} from './plugin'

console.log(random)

export default random

查看打包结果 dist/payfun.rollbear.dev.es.js

// dist/payfun.rollbear.dev.es.js
function random() {
    console.log('random');
}

console.log(random);

export default random;

我们看到 a,b 都被 tree-shaking掉了(过滤掉了)

所以实际开发中不推荐 export default 导出, 而是使用 export 导出