vue項(xiàng)目首次打開時(shí)加載速度很慢的優(yōu)化過程

更新時(shí)間：2022年08月31日 09:13:25 作者：隨遇而安、1314

這篇文章主要介紹了vue項(xiàng)目首次打開時(shí)加載速度很慢的優(yōu)化過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue首次打開時(shí)加載速度很慢

1、使用 vue-router 懶加載解決首次加載時(shí)資源過多導(dǎo)致的速度緩慢問題

當(dāng)你的 SPA（單頁(yè)應(yīng)用程序）變得很復(fù)雜時(shí)，打包構(gòu)建后的 js 包會(huì)變得非常大，以至于嚴(yán)重影響頁(yè)面的加載時(shí)間。vue-router 支持 webpack 內(nèi)置的異步模塊加載系統(tǒng)。所以，那些使用較少的路由組件不必打包進(jìn) bundles 里，只要在路由被訪問時(shí)按需加載。

懶加載路由寫法：

{
	path: "/base/user",
	name: "user",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/user/User')), 'User'),
	meta: {
		breadcrumb: ["基本信息", "用戶管理"]
	}
},
{
	path: "/base/role",
	name: "role",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/role/Role')), 'Role'),
	meta: {
		breadcrumb: ["基本信息", "角色管理"]
	}
}

2、使用CDN加速

以引入vue、vuex、vue-router為例：

第一步，在index.html中，添加CDN資源：

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>

第二步，在 bulid/webpack.base.conf.js 文件中，增加 externals，將引用的外部模塊導(dǎo)入，如下：

第三步，將所有的引用去掉：

// import Vue from "vue";
// 引入element 組件
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import VueRouter from "vue-router";
// import Vuex from "vuex";
// Vue.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);

優(yōu)化vue項(xiàng)目加載過慢問題

發(fā)現(xiàn)問題

線上訪問地址加載時(shí)間很慢

優(yōu)化方案

1、webpack-bundle-analyzer 是 webpack的可視化資源分析工具，優(yōu)化之前下載webpack-bundle-analyzer。

npm i webpack-bundle-analyzer?
或者
cnpm i webpack-bundle-analyzer

2、配置vue.config.js文件

chainWebpack(config){
	config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

3、執(zhí)行 npm run build --report 即可瀏覽器會(huì)自動(dòng)打開一個(gè)頁(yè)面，如下圖所示

優(yōu)化方法

1、使用CDN減小代碼體積加快請(qǐng)求速度

使用CDN主要解決兩個(gè)問題：

1. `打包時(shí)間太長(zhǎng)、打包后代碼體積太大，請(qǐng)求慢`
2. `服務(wù)器網(wǎng)絡(luò)不穩(wěn)帶寬不高，使用cdn可以回避服務(wù)器帶寬問題`

我們將vue，vue-router，vuex，axios，echarts，element，moment使用CDN資源引入。國(guó)內(nèi)的CDN服務(wù)推薦使用 bootCDN

1.1、在index.html里引入線上cdn

1.2、在vue.config.js配置中配置是為了在加載的時(shí)候，引用cdn資源而不是node_modules里的包

configureWebpack:{
	externals: {
      'echarts': 'echarts',
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'moment': 'moment',
      'element-ui': 'ELEMENT'
    },
}

同時(shí)注銷掉main.js文件當(dāng)中的import

2、開啟gzip壓縮

npm i compression-webpack-plugin@1.1.12 --save-dev 新版本有問題的話下載1.1.12版本配置vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack:{
	plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于該值的資源會(huì)被處理
        minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
        // deleteOriginalAssets: true // 刪除原文件
      })
    ],
}

需要nginx服務(wù)器，更改nginx.conf文件，加在如圖所示位置

# 開啟gzip。
gzip on
# 開啟后如果能找到 .gz 文件，直接返回該文件，不會(huì)啟用服務(wù)端壓縮。
gzip_static on
# 文件大于指定 size 才壓縮，以 kb 為單位。
gzip_min_length 1;
# 用于識(shí)別http協(xié)議的版本，早期的瀏覽器不支持gzip壓縮，用戶會(huì)看到亂碼，所以為了支持前期版本加了此選項(xiàng),目前此項(xiàng)基本可以忽略
gzip_http_version 1.1;
# 壓縮級(jí)別，1-9，值越大壓縮比越大，但更加占用 CPU，且壓縮效率越來越低。
gzip_comp_level 9;
# 壓縮的文件類型。
gzip_types text/css application/javascript application/json;
root /dist;

3、路由懶加載

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login'),
    hidden: true
  },
 
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
 
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
]

4、圖片放在oss上，不放在項(xiàng)目的assets文件夾下

對(duì)象存儲(chǔ)(oss)提供內(nèi)置的CDN集成，可以緩存資產(chǎn)以加快頁(yè)面加載速度。對(duì)象存儲(chǔ)非常適合存儲(chǔ)靜態(tài)資源，例如，用于存儲(chǔ)用戶定義的內(nèi)容：圖像和電影，存儲(chǔ)備份文件和日志。更換項(xiàng)目里的圖片路徑，為線上地址即可。

5.去除ScourpMap文件

配置一下vue.config.js即可

productionSourceMap: false,//去除.map文件

6.壓縮代碼，移除console.log

npm i uglifyjs-webpack-plugin@1.1.1 --save-dev

配置vue.config.js

const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
chainWebpack(config) {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注釋
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: