Question

vue为什么还要webpack打包

Answer 1

结论：vue中，直接引用文件，可以让打包文件最小。

试验记录

下面测试项目中引入一个Button组件的代价。

基准工程大小：
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main

通过引入组件的方式
import {Button} from 'vue-weui'

增加了21.3K的大小
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: f694bcd5ed5727442173
Version: webpack 1.12.14
Time: 8039ms
Asset Size Chunks Chunk Names
build.js 102 kB 0 [emitted] main
build.js.map 890 kB 0 [emitted] main

直接引用button.vue文件
import Button from 'vue-weui/components/button/button.vue';

文件大小只增加了0.8KB
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 319a98bac47333236f71
Version: webpack 1.12.14
Time: 6778ms
Asset Size Chunks Chunk Names
build.js 81.5 kB 0 [emitted] main
build.js.map 695 kB 0 [emitted] main

由此可见，为了最大程度降低打包文件的大小，目前最好的方式还是手工引入对应的组件文件。

可别小看这种差异，对于较大的库，采取两种方式的差别是很大的，例如vux库，二者大小可相差400KB：
// 引用部分组件
import {Circle} from 'vux';
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 8770eef20f62e11410ac
Version: webpack 1.12.14
Time: 53821ms
Asset Size Chunks Chunk Names
build.js 480 kB 0 [emitted] main
build.js.map 1.97 MB 0 [emitted] main
// 只引用需要的文件
import Circle from 'vux/components/circle/'
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 926fd28e8edd00ddae53
Version: webpack 1.12.14
Time: 6652ms
Asset Size Chunks Chunk Names
build.js 82.4 kB 0 [emitted] main
build.js.map 696 kB 0 [emitted] main

Answer 2

webpack打包，方便加载相关插件，压缩文件，兼容es6