webpack将ES6编译成CommonJs后只引入用到的模块

Question

代码使用ES6，里面有以下写法：

import {XX1,XX2} from 'abc'；

但是使用webpack编译成AMD规范的代码后，会大概变成这样子：

var abc = require('abc');
var XX1 = abc.XX1;
var XX2 = abc.XX2;

也就是说，他会将整个abc包加载进来，再提取XX1，XX2，但是我想只加载某个包里面使用到的模块，除了下面这种写法：

import XX1 from 'abc/XX1';
import XX2 from 'abc/XX2';

还有其他更优雅的解决方法吗？

Answer 1

了解不多，但关键词 tree-shaking
这些文章可参考参考...
https://doc.webpack-china.org...
https://github.com/Jschyz/web...
https://www.zhihu.com/questio...

追加：切webpack2，上tree-shaking。 不过具体问题具体分析，用上了高级，相应牺牲了啥。 平衡平衡下...细节在上面的url中都有提到。

Answer 2

看看这个库，babel-plugin-import，或者你搜下 import按需加载