2020-04-16日计划：will-change、Tree-Shaking

[sl1673495]

will-change

https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

mdn 文档明确说明了，will-change 属性是一个性能优化的最后手段，没事不要乱用，不要全局挂着，否则会一直请求 gpu 渲染。

同理，一直挂着 translatez 也是一个很差的做法，正确的做法是按需使用，使用完了就要把这个属性去掉。

[sl1673495]

Tree-Shaking

https://juejin.im/post/5bb8ef58f265da0a972e3434

rollup 生成的代码更简洁。

TS 的前提是 es module 的静态分析能力，cjs 太灵活无法做 TS

rollup 自带 TS，而 webpack 需要借助 uglify 的能力。

对于没有用到的函数，rollup 和 webpack 都能很好的去除掉。

IIFE 不会被 TS，因为它会立即执行，不能判断出内部是否有副作用。

/*#__PURE__*/ 可以让一个立即执行函数被视为无副作用的

var Person =
  /*#__PURE__*/               <=这里添加了注释
  function() {
    function Person(_ref) {
    }
    _createClass(Person, [{
      key: "getName",
      value: function getName() {
        return this.name;
      }
    }]);
    return Person;
  }();
exports.Person = Person;

Babel 打包类库的时候，可以提供 es5 和 es6 模块的版本，对于 es6 模块的版本 TS 更友好。

//babel.rc
presets: [["env", { module: false }]]

在你的 npm 包确信没有副作用的情况下，加上 sideEffects: false 标志

如果有 css 的话，它一定是副作用，则加上 "sideEffects": ["*.css"] 标志，否则 css 文件会被丢掉。

或者明确提供一个文件：

"sideEffects": [
    "./src/some-side-effectful-file.js"
]

根据 @小小茂茂 的实验，假设有一个 api 模块：

// api.js

export function getUser() {}

export function waitForTreeShaking()

然后我们通过全量引入的方式引入此模块：

import * from 'api'

api.getUser()

这种方式是可以做到 treeShaking 的，waitForTreeShaking 这个没有用到的方法会被丢弃掉。

而如果我们做了一些灵活的字符串拼接：

import * from 'api'

const get = 'get'
const user = 'User'

api[get + user]()

那么这个模块的所有 export 导出全部会被打包进来，所以要避免 import * + 动态拼接。