使用vue的框架,首次渲染非常慢,如何优化?

新手上路,请多包涵

不使用nuxt等,vue首次渲染还可以怎么优化呢?

阅读 2.7k
3 个回答

先通过 DevToolsLighthouse 分析一下。一般来说都是 JS 包太大了导致的。所以引入 webpack-bundle-analyzer 来分析以下构建完之后的包哪些部分占用的比较多。大多数情况都是 momentjs 这种类库重复引入了。提出来成为公共JS能减少很大空间。
VueCLI 构建的项目,直接在构建在构建命令后面增加 --report 即可,会在构建完成之后打开分页报告。

npm run build --report

要优化首先你得知道具体要哪里需要优化,所以你第一要做的是先做性能分析,看是哪里导致渲染慢,是某段JS逻辑执行耗时长阻塞了渲染还是JS资源太大导致加载耗时长等等

新手上路,请多包涵

自从了解到DevTools 的 Lighthouse,对构建后的包进行分析,性能好多了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题