如何降低Vue.js项目中Webpack打包文件的大小?

版权声明:本文为博主原创文章,未经博主允许不得转载。微信hustos联系博主。 https://blog.csdn.net/maray/article/details/50988500

结论

结论: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

参考资料

参考资料 里面有明确的注释:


// 引用部分组件
import {Dialog} from 'vue-weui';
// 或
// 只引用需要的文件,减少文件大小
import Dialog from 'vue-weui/components/dialog/dialog.vue';

export default {
  components: {
    Dialog
  }
};

课后思考题

引用部分组件,比只引用需要的文件,多做了哪些事,导致文件变大?

思考题答案

通过分别用两种写法编译,探究到了问题的根源:
两种写法的对比

上图中,左边为引用需要的文件,右边为引用部分组件。引用部分组件,背后实际上是引用了整个组件库,然后只把库中的一部分暴露给用户。

下面通过文件大小,进一步证实了这一观察:

 422169  node_modules/vux/vux.js
 280020  fi.js  // 单独文件方式
 700310  md.js  // 子模块方式

 vux.js + fi.js ~= md.js 

那么,有没有智能的方式,自动去掉不需要的文件引用呢?应该有,不过可以猜想到,不会有特别大的改善。如果你有好办法,请留言。


UPDATE(2016/04/21):

谢谢Lxxyx的留言。

下一代打包工具Rollup和Webpack2支持该功能,详细参考:https://ouvens.github.io/frontend-build/2016/01/20/next-generation-js-module-bunlder.html

展开阅读全文

没有更多推荐了,返回首页