V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kanganxi
V2EX  ›  Node.js

请教 vue 项目 npm run build 打包后 首页请求在 30 秒以上的问题,

  •  
  •   kanganxi · 2017-10-15 11:46:12 +08:00 · 6720 次点击
    这是一个创建于 2597 天前的主题,其中的信息可能已经有所发展或是发生改变。
    小弟第一次接触 vue,目前放到服务器打包后,请求访问都需要 30 秒以上,不知道是前端需要优化,还是服务这边需要优化,node 版本:v6.11.3 ; npm 版本:3.10.10 ,服务环境是:apache ,
    打包后文件大小:

    20K ./manifest.4944a9984146e2cb17eb.js.map
    204K ./9.1c42fd067f4cea44cfce.js.map
    84K ./5.62f50157b73e87d7bed0.js
    228K ./8.27f554d6ad46c7fd02fb.js.map
    84K ./8.27f554d6ad46c7fd02fb.js
    12K ./app.f0ffe46532103f82260d.js
    8.0K ./19.738b338ece0406664542.js.map
    236K ./5.62f50157b73e87d7bed0.js.map
    24K ./18.5c0486c20ea231723aa9.js.map
    60K ./17.073dd9a6bc3b12fe9bfc.js
    64K ./app.f0ffe46532103f82260d.js.map
    4.0K ./manifest.4944a9984146e2cb17eb.js
    72K ./9.1c42fd067f4cea44cfce.js
    68K ./7.282ead56844fe2ca6e51.js
    4.0K ./22.12512bfbe8c12248e183.js
    188K ./10.6021df6dcc02f2c43f56.js.map
    236K ./0.e6e0d31b049eea117800.js.map
    92K ./13.fc0f550ed4be4d8beeaa.js.map
    4.0K ./19.738b338ece0406664542.js
    84K ./0.e6e0d31b049eea117800.js
    72K ./14.289ae58f6a7c3924fd93.js
    336K ./1.4c83eb5a0a5c9faa391b.js
    836K ./vendor.0e9b733443424e85aa13.js
    156K ./15.65d2302057b042709ed7.js.map
    268K ./3.8fd274b3db7dea1017b9.js.map
    1.5M ./1.4c83eb5a0a5c9faa391b.js.map
    8.0K ./18.5c0486c20ea231723aa9.js
    176K ./12.cde79a28b2e18a810e8c.js.map
    336K ./2.12b39b9f1147d19d4240.js
    248K ./4.ffaf991b9e4cb829fa89.js.map
    8.0K ./21.6215732c5d6155bf6115.js.map
    4.0K ./21.6215732c5d6155bf6115.js
    92K ./4.ffaf991b9e4cb829fa89.js
    64K ./11.d2a0cffa8b35d3caf940.js
    8.0K ./20.ca1d3cd9cacda9a58a71.js.map
    8.0K ./22.12512bfbe8c12248e183.js.map
    84K ./6.590ba6eff7df1511542e.js
    1.5M ./2.12b39b9f1147d19d4240.js.map
    64K ./12.cde79a28b2e18a810e8c.js
    4.0K ./20.ca1d3cd9cacda9a58a71.js
    164K ./16.389c31b2191cd0548ffd.js.map
    20K ./13.fc0f550ed4be4d8beeaa.js
    144K ./17.073dd9a6bc3b12fe9bfc.js.map
    96K ./3.8fd274b3db7dea1017b9.js
    208K ./7.282ead56844fe2ca6e51.js.map
    236K ./6.590ba6eff7df1511542e.js.map
    72K ./15.65d2302057b042709ed7.js
    68K ./10.6021df6dcc02f2c43f56.js
    4.9M ./vendor.0e9b733443424e85aa13.js.map
    68K ./16.389c31b2191cd0548ffd.js
    156K ./14.289ae58f6a7c3924fd93.js.map
    184K ./11.d2a0cffa8b35d3caf940.js.map
    一共 14M
    请求 V 友友们支招,
    13 条回复    2017-10-15 14:02:53 +08:00
    ljcarsenal
        1
    ljcarsenal  
       2017-10-15 11:52:20 +08:00 via iPhone
    map 文件不要上传。。
    ljcarsenal
        2
    ljcarsenal  
       2017-10-15 11:56:12 +08:00 via iPhone   ❤️ 1
    感觉你 webpack 配置有问题 公共的资源每个 js 都打了一份。。。或者说是样式没有抽出来 都打在 js 里面了。
    tlday
        3
    tlday  
       2017-10-15 12:00:06 +08:00 via Android   ❤️ 1
    话说,production 的 build,不该去生成 map 文件的。
    1.代码压缩
    2.去掉不需要的依赖
    3.惰性加载
    4.开启浏览器缓存
    看你这么多数字命名的 bundle,应该都是惰性加载的,不该这么慢。第一次加载必须的东西应该只有 852k,app,minifest,vendor 三个文件。不知道是不是有别的东西拖了速度。
    不要看项目打包出来有多大,应该去看浏览器的开发者工具里 Network 里加载的数据量有多少。
    tlday
        4
    tlday  
       2017-10-15 12:01:06 +08:00 via Android
    前端的性能优化要从浏览器的开发者工具入手。
    szdubinbin
        5
    szdubinbin  
       2017-10-15 12:22:00 +08:00 via iPhone   ❤️ 1
    前面说了一些问题,你这个 js 全部都差不多 2-3M 吧,那 30s 就很正常了。不清楚具体业务不好分析。
    murmur
        6
    murmur  
       2017-10-15 12:22:55 +08:00   ❤️ 1
    经验告诉我一般 js map 这些问题都不大 图片 resize 改变质量 转 base64 这些更耽误时间
    kanganxi
        7
    kanganxi  
    OP
       2017-10-15 12:30:35 +08:00
    @tlday 感谢兄弟,我处理一下,第一次用和这个有点懵逼
    duan602728596
        8
    duan602728596  
       2017-10-15 13:31:16 +08:00 via iPhone
    如果是首屏渲染 30S 以上的话,还可能是有某些 css 或者 js 文件挂掉了,会影响页面渲染
    kanganxi
        9
    kanganxi  
    OP
       2017-10-15 13:36:40 +08:00
    刚才看了看请求: <img src="http://wx1.sinaimg.cn/large/6f3bc08dly1fkivh37eg8j20yl065dg9" class="embedded_image"> vendor.js 请求时间很长
    kanganxi
        10
    kanganxi  
    OP
       2017-10-15 13:46:57 +08:00
    xmcp
        11
    xmcp  
       2017-10-15 13:55:32 +08:00
    半分钟传几百 KB,你这服务器网速是要有多慢……
    不过话说这 js 里都有多少东西?这大小都能放下两个 echarts 了。
    kanganxi
        12
    kanganxi  
    OP
       2017-10-15 14:01:19 +08:00
    @xmcp 应该不是服务器的问题,应该是打包后的 js 里面还有请求导致的,服务器运行其他的没问题
    hzw758
        13
    hzw758  
       2017-10-15 14:02:53 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2679 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:22 · PVG 13:22 · LAX 21:22 · JFK 00:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.