Package size is too large

[ShirasawaSama]

At present, this module directly imports Three.js:

import * as THREE from 'three'

So the bundle files contains about 500kb of Three.js codes. It is too huge.

So you can reduce the bundling size by this ways:

• Tree Shaking.
• Import Three.js by this way:

import Vector2 from 'three/src/math/Vector2'

---

当前模块由于直接引入了 Three.js , 导致打包大小贼大 (大约 500kb ):

import * as THREE from 'three'

这些是一些解决方法:

• 使用 Tree Shaking (首先得改文件里导入 Three.js 的写法, 最好用 bili 或者 rollup 弄个包含了 Tree Shaking 后的 Three.js 源码的模块)
• 单独导入子模块:

import Vector2 from 'three/src/math/Vector2'

[g-plane]

我们已经有在使用 Rollup。后面一种写法确实可以做到 tree shaking，但还需要确定这样能不能得到Three.js 的 TypeScript 类型定义。

[ShirasawaSama]

@g-plane 尝试了一下, 是可以的:

tsconfig.json:

{
  "moduleResolution": "node"
}

a.ts:

import { Vector2 } from 'three/src/math/Vector2'

new Vector2(...)

[g-plane]

感谢帮忙测试。

[ShirasawaSama]

我可以提交pr, 但是我仍旧希望提供一个预先打包好threejs的版本(

[g-plane]

「预先打包好 threejs 的版本」？这是指？

[ShirasawaSama]

好像原本就有了(umd)

就是我的程序中不方便使用 tree shaking, 然后就是预先把threejs也打包进这个模块的发布版本中, 就不需要另外打包threejs了, 其实就是 TreeShaking 后的 Skinview3d+Threejs

[g-plane]

就是包含一个不完整的 Three.js，是吗？

[ShirasawaSama]

是的

[g-plane]

我感觉 Rollup 已经进行过 tree shaking，因为 Three.js 的完整压缩 build 有 500 多 KB，而 skinview3d 的压缩 build 只有 24KB。

[ShirasawaSama]

600kb->398kb

[g-plane]

这个是？

[ShirasawaSama]

修改了引入方式之后打包的

[g-plane]

但是现在在没有做任何改动的情况下，也才 57.6KB，而压缩后更只有 24KB。

[ShirasawaSama]

打包了threejs之后的uglify之后的大小

[g-plane]

已经包含了 Three.js 了，skinview3d 本身是很小的。

[g-plane]

稍等……

[yushijinhun]

Reopened due to #41 (comment)

[yushijinhun]

Other users of three.js are also facing this problem. Take a look at Hubs-Foundation/Spoke#747.

[yushijinhun]

@ShirasawaSama I'm working on a rollup plugin three-minifier. Currently, the bundle (skinview3d & three.js) it produces is about 377KB.

[yushijinhun]

I've just released three-minifier v0.1.1. I think it is a good solution to this problem, so I'm going to close this issue.