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

二、解決方法：

1、Vue-router懶加載

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

路由懶加載寫法：

非懶加載：

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

3、第三方庫使用CDN引入

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

注意：刪掉項目中import的這幾個相關的，以及Vue.use()。eslint插件報錯not defined的話，前面加個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開啟打包壓縮和后臺配置gzip訪問

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

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

此時重新打包 npm run build ，此時打包的文件會 新增 .gz 文件。是不是比原來的js文件小很多呢，之后項目訪問的文件就是這個.gz文件

后臺nginx開啟gzip模式訪問，瀏覽器訪問項目，自動會找到 .gz 的文件。加載速度明顯提高：

在 nginx.conf 配置文件中 配置

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。