网络编程 
首页 > 网络编程 > 浏览文章

vue项目首屏打开速度慢的解决方法

(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )

最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢?

首先我们需要安装webpack-bundle-analyzer

// webpack.prod.conf.js
if (config.build.bundleAnalyzerReport) {
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
// config/index.js
build: {
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

运行npm run build --report

vue项目首屏打开速度慢的解决方法

我们可以看到,vendor中的elementui占了500k,怎么优化呢?

在webpack配置文件中增加,接下来就是见证奇迹的时刻。

externals: {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'axios': 'axios'
 },

再看一下我们的vendor体积

vue项目首屏打开速度慢的解决方法

vendor一共才195k

那缺少的elementui文件去哪里找呢?答案是cdn引用。

vue项目首屏打开速度慢的解决方法

之前项目里还有引用moment,但是这个库实在是太大了,在github上我找到一个跟momentapi完全一样的库,但是文件大小只要2kb。

vue项目首屏打开速度慢的解决方法

其他优化方法还有ssr,这个最好用nuxtjs来做,自己配置ssr实在太麻烦了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:微信小程序访问豆瓣电影api的实现方法
下一篇:jQuery事件blur()方法的使用实例讲解
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap