項目遇到的問題總結（四）：單頁面首屏加載慢解決方案

本文轉載自查看原文 2019-08-08 15:01 2053

VUE 單頁應用首頁加載特別慢的解決方法，（我自己沒百度之前，想的是路由懶加載，圖片懶加載，壓縮cssjs）

百度之后，才發現菜雞

我們一般打包后把生成的dist文件夾下面的這兩個東西拖到服務器下面就行了

首先你要想到拖到服務器，減少這個文件的體積，看他的構造，index.html沒發變小了才1kb;

就要在static里面下文章了，打開static,

打開js,可以看到，里面有許多.map文件，而且很多都很大，如圖最后一個3M多，map文件是什么鬼？這些文件主要是幫助我們線上調試代碼，查看樣式。所以為了避免部署包過大，通常都不生成這些文件。

意思就是有了map文件我們就會知道比如報錯是哪個頁面報的錯，console.log就能打印出來具體的第幾行數據

如圖所示，說白了就是起一個輔助調試的作用，一般線上不需要這個.map文件，所以為了避免部署包過大，通常都不生成這些文件。

在 config/index.js 文件中將productionSourceMap 的值設置為false. 再次打包就可以看到項目文件中已經沒有map文件

沒去掉之前static是6.26M大小去掉之后是1.89M 我擦這尼瑪減少這么多；

去掉.map文件之后的js文件夾

在下一步:

vue-router 路由懶加載

懶加載即組件的延遲加載，通常vue的頁面在運行后進入都會有一個默認的頁面，而其他頁面只有在點擊后才需要加載出來。

使用懶加載可以將頁面中的資源划分為多份，從而減少第一次加載的時候耗時。

懶加載配置：

非懶加載路由配置：（平時我都是這么寫的，艹原來是不標准的寫法）

路由懶加載打包后static-->js文件夾

如圖所示為通過非懶加載和懶加載后打包的js文件。而非懶加載的打包后一般只有一個app.js 文件。

非懶加載打包后

這個1-10.js就相當於你的10個路由對應的文件我是這么理解的哈（使用路由的按需加載，可把app.js分隔成多個小的js文件）

注意這個vendor.js文件很大這個怎么搞？每次打開會發現這個js很耗時，它是項目所有依賴的集成（包括vue vue-router axios echarts ele等）

vendor.js一般是將所有引用的庫打包在了一起，首先就需要確定是哪些庫文件太大，可以參考 vue打包優化分析工具，其實這個插件沒啥用（裝逼用的）

如下圖你打包完成之后，哪些文件大有個big提示

// 1. 安裝
cnpm install webpack-bundle-analyzer --save-dev

// 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 然后配置一下：
plugins: [
    new BundleAnalyzerPlugin()
]

// 3. 在package.json文件中配置：
"scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

// 4. 運行（會自動在瀏覽器打開：http://127.0.0.1:8888/）
npm run build

然后就會出現一張類似這樣的圖片

這幾個英文

stat size（統計尺寸）

parsed size（解析大小）

Gzipped size（壓縮大小）

vendorjs中是項目中所有引用的依賴包，即使用的vue、eleui、axios、echarts等等插件框架什么的都在這里邊。解決辦法

　　# cdn引入插件

　　# 打包時使用Gzip

沒解決之前是

現在來解決它看能不能變小

先來試一下壓縮，

webback.prod.config.js 中添加如下代碼。（文件大小 10.5MB-->3.5MB）

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      // deleteOriginalAssets:true, //刪除源文件
      minRatio: 0.8
    })
  )