Nodejs 环境下 vue 项目 npm run build 打包后 首页请求在 30 秒以上的问题

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Nodejs 环境下 vue 项目 npm run build 打包后 首页请求在 30 秒以上的问题
小弟第一次接触 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 友友们支招，


Harmonyos Next教程
14 回复

map 文件不要上传。。


感觉你 webpack 配置有问题 公共的资源每个 js 都打了一份。。。或者说是样式没有抽出来 都打在 js 里面了。

话说，production 的 build，不该去生成 map 文件的。
1.代码压缩
2.去掉不需要的依赖
3.惰性加载
4.开启浏览器缓存
看你这么多数字命名的 bundle，应该都是惰性加载的，不该这么慢。第一次加载必须的东西应该只有 852k，app，minifest，vendor 三个文件。不知道是不是有别的东西拖了速度。
不要看项目打包出来有多大，应该去看浏览器的开发者工具里 Network 里加载的数据量有多少。

前端的性能优化要从浏览器的开发者工具入手。

前面说了一些问题，你这个 js 全部都差不多 2-3M 吧，那 30s 就很正常了。不清楚具体业务不好分析。

经验告诉我一般 js map 这些问题都不大 图片 resize 改变质量 转 base64 这些更耽误时间

感谢兄弟，我处理一下，第一次用和这个有点懵逼

如果是首屏渲染 30S 以上的话，还可能是有某些 css 或者 js 文件挂掉了，会影响页面渲染

刚才看了看请求： <img src=“http://wx1.sinaimg.cn/large/6f3bc08dly1fkivh37eg8j20yl065dg9” class=“embedded_image”> vendor.js 请求时间很长

主要问题是 ：[![问题]( http://wx1.sinaimg.cn/large/6f3bc08dly1fkivh37eg8j20yl065dg9 “问题”)]( http://wx1.sinaimg.cn/large/6f3bc08dly1fkivh37eg8j20yl065dg9 “问题”)

半分钟传几百 KB，你这服务器网速是要有多慢……
不过话说这 js 里都有多少东西？这大小都能放下两个 echarts 了。

应该不是服务器的问题，应该是打包后的 js 里面还有请求导致的，服务器运行其他的没问题

试试关闭 map https://segmentfault.com/q/1010000008082747

在 Node.js 环境下，Vue 项目通过 npm run build 打包后首页请求延迟超过 30 秒的问题可能由多种因素引起，包括资源加载慢、代码优化不足、服务器配置不当等。以下是一些可能的解决步骤和优化建议：

  1. 优化打包文件：
    • 使用 webpack-bundle-analyzer 分析打包后的文件，找出体积过大的依赖并进行优化。
    • 配置 vue.config.js 中的 productionSourceMap 为 false，以减少生成的 source map 文件大小。
// vue.config.js
module.exports = {
  productionSourceMap: false,
  // 其他配置...
};
  1. 代码分割和懒加载：
    • 使用 Vue Router 的懒加载功能，按需加载路由对应的组件。
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');

  1. 服务器优化：

    • 确保服务器有足够的带宽和性能来处理请求。
    • 使用 CDN 加速静态资源的加载。
    • 配置服务器启用 Gzip 压缩。

  2. 浏览器缓存：

    • 设置合适的缓存策略，减少重复请求。

  3. 网络问题：

    • 检查网络延迟和丢包情况，确保服务器和客户端之间的网络连接稳定。

  4. 日志分析：

    • 查看服务器和浏览器的开发者工具中的网络日志，分析哪些资源加载耗时最长。

通过以上步骤，通常可以显著减少 Vue 项目打包后首页的加载时间。如果问题依然存在，可能需要更深入地分析具体的代码和服务器配置。

回到顶部