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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

PageSpeed 相关文档

› 为 NGINX 编译 PageSpeed 支持

› ngx_pagespeed

› Configuring mod_pagespeed Filters

加载性能测试工具

› WebPagetest

› Gomez

这是一个创建于 1974 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

import aaa from 'package/pathA';
import bbb from 'package/pathB';
import ccc from 'package/pathC';

6 条回复 • 2019-06-15 11:17:08 +08:00

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 via iPhone

js 动态性太强了，想要追踪 fun1 到底依赖了哪些文件非常困难，而且很容易遗漏
就像 java 的 jdk 剪裁，一不小心就会掉到反射的坑

MuscleOf2016

2019-06-14 17:45:55 +08:00 via iPhone

@wwqgtxx 所以只能做到像上面那样，根据路径去优化咯？

qiuyk

2019-06-15 09:31:16 +08:00 via iPhone

@MuscleOf2016 现在基本只有这个办法和粒度了，即使是 tree shaking 还要标明无副作用，webpack 和 rollup 才能判断出来扔掉哪些没用的代码

MuscleOf2016

2019-06-15 11:17:08 +08:00 via iPhone

@qiuyk 好的，谢谢。