关于wex5项目大小、加载速度的简单分析

atfa

今天看到一个帖子：
http://bbs.wex5.com/forum.php?mod=viewthread&tid=114161
其实类似的帖子还很多，官方似乎也有关于项目优化的提示：
http://docs.wex5.com/page-optimize/
但是都没有解决一个问题，就是项目体积真的很大！

本来是不想回复这些帖子的，但是看到官方liangyongfei一直在很辛苦的工作，所以也抽时间说两句。
拿我一个现成的项目来分析吧，看看加载过程到底加载了些什么：

老问题了吧，说白了就是wex5打包了太多的东西，举例吧，一个我的wex5页面打包部署到服务器上后，加载过程可以看到：
https://xxxx.com/system/lib/base/modernizr-2.8.3.min.js
这个玩意儿是什么鬼？网上搜一搜，原来是HTML5/CSS3 特性检测库，用来检测用户的浏览器是否支持各种HTML5标准，23.19k，可是，你真的需要吗？
https://xxxx.com/system/components/bootstrap.min.css
这个是什么大家都知道吧，wex5大量采用了bootstrap的东西，可是如果你的项目中一个bootstrap的组件都没有用到，也来加载这个，是不是很难过？126.49k。
https://xxxx.com/system/components/comp.min.css
这个有221k啊！是什麽！随便看一点内容：

1. 
   
2. .icon-alert-circled:before {
   
3.   content: "\f100"; }
   
4. .icon-android-add:before {
   
5.   content: "\f2c7"; }
   
6. .icon-android-add-contact:before {
   
7.   content: "\f2c6"; }
   
8. .icon-android-alarm:before {
   
9.   content: "\f2c8"; }
   
10. .icon-android-archive:before {
    
11.   content: "\f2c9"; }
    
12. .icon-android-arrow-back:before {
    
13.   content: "\f2ca"; }
    
14. .icon-android-arrow-down-left:before {
    
15.   content: "\f2cb"; }
    
16. .icon-android-arrow-down-right:before {
    
17.   content: "\f2cc"; }
    
18. .icon-android-arrow-up-left:before {
    
19.   content: "\f2cd"; }
    
20. .icon-android-arrow-up-right:before {
    
21.   content: "\f2ce"; }
    

复制代码

1. 
   
2. .x-dialog-body-overflow-hidden {
   
3.   overflow: hidden;
   
4. }
   
5. .x-dialog-drag .x-dialog {
   
6.   cursor: move;
   
7. }
   
8. .x-dialog-resize-h {
   
9.   cursor: s-resize;
   
10. }
    
11. .x-dialog-resize-v {
    
12.   cursor: w-resize;
    
13. }
    
14. .x-dialog-overlay {
    
15.   position: fixed;
    
16.   left: 0;
    
17.   top: 0;
    
18.   width: 100%;
    
19.   height: 100%;
    
20.   background-color: #000000;
    
21.   
    
22.   filter: alpha(opacity=40);
    
23.   
    
24.   background: rgba(0, 0, 0, 0.4);
    
25.   z-index: 2000;
    
26.   visibility: hidden;
    
27.   opacity: 0;
    
28. }
    
29. .x-dialog-overlay.x-dialog-overlay-visible {
    
30.   visibility: visible;
    
31.   opacity: 1;
    
32. }
    

复制代码

懂了吧，是几乎所有组件的class设置，可是，你真的用到了所有吗？
再来:
https://xxxx.com/system/lib/require/require.2.1.10.js
简单的说，require.js是js文件加载、相互依赖的管理模块，选择了wex5，就跑不掉，101k
下面的厉害了！
https://xxxx.com/system/core.min.js 303k
https://xxxx.com/system/common.min.js 82k
https://xxxx.com/system/components/comp.min.js 295k
https://xxxx.com/system/components/comp2.min.js 222k
https://xxxx.com/system/components/pc.addon.min.js 362k
这五个加起来有1264k的东西是所有wex5核心组件的js代码，问题是，你的项目真的把所有组件都用上了？？？？？

这接近2M的内容都不是我们自己写的，全是官方编译以后自己产生的，这就已经很说明问题了：wex5的项目大是因为集成了太多的东西在里面，不管你用不用得到，都给加载到内存里。

别抱怨，这就是你选择的wex5，这不是wex5的错，这是一个思路：首次加载慢一点，但是过程中就接近原生app的运行效率了。如果你想要你的项目部署到web服务器上加载很快的话，你选择vue这个最新的框架，也就是几十k的加载量而已。

给官方的建议是，能不能在编译UI的过程中，分析项目到底用到哪些组件，只把这些组件的js拿出来打包，而不是把所有的组件全部打包？

doudou459

liangyongfei 发表于 2017-11-8 10:33
网页过大？？我们是单页应用啊！打开以一个页面时，只是加了一个页面片段，并且会缓存的！
你是参考我们 ...

好了   大大   找到解决方法了  可行性比较高    建议WEX5把内置的tomcat 也做相应修改   
按照9楼大大的方法  启用了tomcat的压缩功能    将页面压缩到了1M以内了。简单点的600KB 的样子   
另外需要注意的一点是   tomcat6 或7  版本  启用了压缩功能后  还需要加一句  useSendfile="false"  才能生效压缩功能 （这是为什么wex5内置的tomcat没有压缩文件的原因 ）

442724344

文章写得好，wex5首页加载的东西的确太多了，所以当用网页打开（或者微信打开）非常耗流量，等待时间非常久（首页打开比一般网页慢50%左右），尤其是网络状况不佳的情况下，会出现部分文件加载不完全，所以还是希望官方能够优化一下首页加载的东西！不胜感激！

半导体

非常感谢楼楼出来为版主大大伸张正义！！（不知道这样理解对不对）
但是你的建议版主大大绝对会积极反馈的！

atfa

半导体 发表于 2017-2-7 10:25
非常感谢楼楼出来为版主大大伸张正义！！（不知道这样理解对不对）
但是你的建议版主大大绝对会积极反馈的 ...

可是一个月过去了，版主大大还是没有积极反馈啊……

半导体

atfa 发表于 2017-3-8 22:05
可是一个月过去了，版主大大还是没有积极反馈啊……

你怎么知道我没有？

atfa

半导体 发表于 2017-3-9 09:22
你怎么知道我没有？

自己称呼自己版主大大……
我怎么知道你就是版主大大啊……
biu～～～
好吧，那你反馈的结果怎么样啊？

半导体

442724344 发表于 2017-3-9 14:10
文章写得好，wex5首页加载的东西的确太多了，所以当用网页打开（或者微信打开）非常耗流量，等待时间非常久 ...

其实没什么感激不感激的   你们提出的意见和不足  对于我们来讲都是非常宝贵的    我们之间是相互促进的嘛

keevinliang

顶楼主，这个真是用wex5来开发微信公众号的大坑，要不是页面不会弄，真不想用它，加载太慢了，想爆粗

442724344

如果用自己的tomcat ，可以启用压缩，客户端接收的内容将大大缩小，实际测试，从1.2m缩小到300k，开发工具的已经启用

keevinliang

442724344 发表于 2017-5-21 14:07
如果用自己的tomcat ，可以启用压缩，客户端接收的内容将大大缩小，实际测试，从1.2m缩小到300k，开发工具 ...

请问怎么弄？我的是nginx+tomcat