Saber2pr's Blog

打包优化

  1. 利用 import()函数将体积较大、不是每个页面都用的模块分割出去，例如 import('echarts')

  2. 使用 moment 库时，注意将语言包分出去，利用 webpack.IgnorePlugin：

new webpack.IgnorePlugin(/\.\/locale/, /moment/)

// 再导入中文包
import 'moment/locale/zh-cn'
  1. 注意一些库的聚合导出，检查是否可以分块导入，例如 react-use：
// 错误
import useInterval from 'react-use'
// 正确
import useInterval from 'react-use/lib/useInterval'
  1. 避免使用聚合导出

其实我每次写聚合导出的时候就感觉会影响代码分割：

// c.ts
export * from './a'
export * from './b'

// d.ts
import { a } from './c'

这样即使 d 没有用到 b，由于聚合导出导致把 b 也打包进来了。

聚合导出的优点可能就是减少文件顶部一大堆的 import 语句。不过 node 服务端不打包的话聚合导出影响应该不大。