Rollup学习系列2-什么样的代码容易tree sharking
上篇讲了下 tree sharking 来源于 ES6 的静态引入,这篇讲下什么样的代码才能更好的支持 tree sharking
主要有3点
- 自己的代码只引用需要用到的 function
- 避免使用 Class
- 第三方库要注意
只引用你需要用到的 function,不要瞎鸡儿引用
先来个例子
//util.js
export function test1(){
console.log("test1");
}
export function test2(){
console.log("test2")
}
// main.js
import{test1} from './util'
test1()
复制代码
这种方式打包后是这个样子
// build.js
function test1() {
console.log("test1");
}
test1();
复制代码
假设 是下面这种引入方式
// main.js
import * as utli from './util'
utli.test1()
复制代码
打包出来是这个样子
// build.js
function test1() {
console.log("test1");
}
function test2() {
console.log("test2");
}
test1();
复制代码
明显第一种才是我们需要的,所以记住哈,只引用你需要的
组件里不要使用 Class
还是来个例子
export default class Demo {
test1(){
console.log("test1");
}
test2(){
console.log("test2");
}
}
// main.js
import Demo utli from './Demo'
(new Demo()).test1()
复制代码
生成后的代码
_createClass(Demo, [{
key: "test1",
value: function test1() {
console.log("test1");
}
}, {
key: "test2",
value: function test2() {
console.log("test2");
}
}]);
return Demo;
}();
// import * as utils from './util'
new Demo().test1();
复制代码
可以看到把 test1,test2 都打进去了,所以在写库,组件的时候不推荐使用 Class,当然如果项目里有用到 Webpack, Webpack 最后还是能把 test2 给剔除的,但在构建库的时候,能少些代码就少些代码
第三方库使用
这里我们用 lodash 举例,lodash 是 用 commonjs 规范写的,社区有 lodash-es
,举个例子
import sortBy from "lodash-es" // 这样会把很多多余的代码也带进来
import sortBy from "lodash-es/sortBy" // 这样不会
复制代码
类似的第三方库还有Rxjs
,所以在使用的时候要注意了
以上几点注意,基本在使用 Rollup 的过程中,都能很好的构建支持 tree sharking