使用花括号import，webpack会引入所有吗？

Question

比如如下代码：

//组件库
import Layout from './Layout';
import Page from './Page';
import Amap from './Amap';
import Filter from './Filter';

export default{
  Layout,
  Page,
  Amap,
  Filter
}

//使用组件的时候
import {Page} from 'components';

这样我只用了Page组件，webpack会引入所有的组件吗？怎么引入方式比较好呢？

Answer 1

不会，只会加载导入的组件，肯定是用到什么，引入什么最好。但即使引入了没有使用的模块，打包时uglifyjs等插件也会将没有用到的模块给去除掉

Answer 2

这样写就是按需加载

Answer 3

为啥我这样写页面报错了，import｛Page｝提示Page未定义

Answer 4

看webpack配置。启用tree-shaking就是部分引入，否则就是全部引入。