import 引用模块如何优雅的减少 webpack 打包体积?

2019-06-14 16:48:06 +08:00
 MuscleOf2016

除了使用以下根据 npm 包中模块文件路径来按需引用,这种方式减少打包体积, 还有什么更优雅的方式,这样多个模块就要多个 import 了

import aaa from 'package/pathA';
import bbb from 'package/pathB';
import ccc from 'package/pathC';
3732 次点击
所在节点    前端优化
6 条回复
IsaacYoung
2019-06-14 17:05:22 +08:00
1. tree shaking
import { whatYouNeed } from 'package/A'

2. dynamic import
import('path/to/your/package').then( module => {
// use module here
})
MuscleOf2016
2019-06-14 17:12:05 +08:00
@IsaacYoung 这两种应该都是从引入模块路径的角度去减少体积。我在想有没有 webpack 有没有什么插件或者什么方式,可以检查引入的 package,自动提取出使用的模块 module1,那么我的代码只要像下面这么写就好了。
```
import { module1 } form 'Package';
module1.fun1();
```
wwqgtxx
2019-06-14 17:26:04 +08:00
js 动态性太强了,想要追踪 fun1 到底依赖了哪些文件非常困难,而且很容易遗漏
就像 java 的 jdk 剪裁,一不小心就会掉到反射的坑
MuscleOf2016
2019-06-14 17:45:55 +08:00
@wwqgtxx 所以只能做到像上面那样,根据路径去优化咯?
qiuyk
2019-06-15 09:31:16 +08:00
@MuscleOf2016 现在基本只有这个办法和粒度了,即使是 tree shaking 还要标明无副作用,webpack 和 rollup 才能判断出来扔掉哪些没用的代码
MuscleOf2016
2019-06-15 11:17:08 +08:00
@qiuyk 好的,谢谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/573999

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX