一、什么導(dǎo)致了首頁初步加載過慢：app.js文件體積過大

二、解決方法：

1、Vue-router懶加載

vue-router懶加載可以解決首次加載資源過多導(dǎo)致的速度緩慢問題：vue-router支持WebPack內(nèi)置的異步模塊加載系統(tǒng)。所以，那些使用較少的路由組件不必打包進(jìn)bundles里，只需要在路由被訪問時(shí)按需加載。

路由懶加載寫法：

非懶加載：

2、在webpack打包的過程中，將多余文件去掉，如map文件，即在config/index.js中將productionSourceMap的值修改為false，就可以在編譯時(shí)不生成.map文件了

3、第三方庫使用CDN引入

在項(xiàng)目開發(fā)中，我們會(huì)用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會(huì)有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時(shí)找不到組件報(bào)錯(cuò)。

注意：刪掉項(xiàng)目中import的這幾個(gè)相關(guān)的，以及Vue.use()。eslint插件報(bào)錯(cuò)not defined的話，前面加個(gè)window，如window.VueRouter。

推薦外部的庫文件使用CDN資源：

bootstrap CDN：https://www.bootcdn.cn

Staticfile CDN：https://www.staticfile.org

jsDelivr CDN：https://www.jsdelivr.com

75 CDN：https://cdn.baomitu.com

UNPKG：https://unpkg.com

cdnjs：https://cdnjs.com

4、vue-cli開啟打包壓縮和后臺(tái)配置gzip訪問

首先安裝插件：compression-webpack-plugin

在?config/index.js中將productionGzip 改為 true

此時(shí)重新打包 npm run build ，此時(shí)打包的文件會(huì) 新增 .gz 文件。是不是比原來的js文件小很多呢，之后項(xiàng)目訪問的文件就是這個(gè).gz文件

后臺(tái)nginx開啟gzip模式訪問，瀏覽器訪問項(xiàng)目，自動(dòng)會(huì)找到 .gz 的文件。加載速度明顯提高：

在 nginx.conf 配置文件中 配置

總結(jié)

以上是生活随笔為你收集整理的vue 加载太慢_Vue首页加载过慢 解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。