如何降低Vue.js项目中Webpack打包文件的大小?
2016-03-26 19:48
1426 查看
结论
结论: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
相关文章推荐
- 334. Increasing Triplet Subsequence
- 通过request获得全路径
- 自定义控件基础 requestLayout()和invalidate()区别
- 五、初学servlet之请求Request
- Leetcode Sudoku Solver My Submissions Question
- 开源的OLAP框架druid
- 有多个手势支持时候需要实现UIGuestrueRecoginer方法
- UIBezierPath转换为传统上下文的样式
- UIGestureRecognizer手势有哪些
- CodeForces - 560D Equivalent Strings (DFS)
- Educational Codeforces Round 10 E - Pursuit For Artifacts (强联通缩点 + 回溯)
- serialVersionUID
- UITableView 系列之自定义 UITableViewCell
- Mongo 中间件 pre find 修改query
- 【边做项目边学Android】小白会遇到的问题--This Android SDK requires Android Developer Toolkit version 23.0.0 or above
- APUE之线程(三)
- JAVA的String、StringBuilder和StringBuffer
- UILabel 添加图片
- EasyGUI的安装
- 01-复杂度2 Maximum Subsequence Sum (25分)