webpack的树摇功能使用

webpack2.0之后就开始支持树摇的操作,树摇的意思就是摇掉不需要或者未使用的代码,之前在写 d-utils 库的时候发现,当方法越来越多,代码越来越多的时候,在项目中引入之后打包,发现打包的js达到300kb,然而对于我实际上用的方法也就5个左右,这会造成打入了很多无用的代码,于是优化开始了

tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

如何让自己的代码支持tree-shaking?

  • 使用 ES2015 模块语法(即 import 和 export)
  • 通过将 mode 选项设置为 production,启用 minification(代码压缩) 和 tree shaking。
  • 无副作用的代码
  • class包装方法无法tree-shaking

优化的方式

1
2
3
4
5
6
7
8
9
// a.ts
export default class A {
  func1 () {},
  func2 () {}
}

// main.ts
import A from 'a'
A.func1()

此时打包该项目的时候会发现,我并没有使用的func2也被打进包里,如果想移除func2只能这样

1
2
3
4
5
6
7
// a.ts
export const func1 = () => {}
export function func2 () {}

// main.ts
import { func1 } from 'a'
func1()

这时候是可以成功移除掉func2的代码的,至于为什么class不可以 https://github.com/rollup/rollup/issues/349

结果

将部分文件的代码优化成方法的export导出形式,对一个项目的同样代码进行打包查看结果

优化之前: 优化之前 优化之后: 优化之前

上一篇 : 正则学习下一篇 : 移动端基于vue项目的微信分享解决方案