vue2x專案調優

1.專案優化策略

1.1. 加進度條動畫

1.github搜尋nprogress

2.安裝nprogress

$ npm i nprogress -S

3,配置main.js

// 1、匯入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2、使用,在請求開始的時候
axios.interceptors.request.use((config) => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem("token")
  // 在最後必須 return config
  return config
})

3、使用,在請求結束收尾的時候
axios.interceptors.response.use((config) => {
  NProgress.done()
  return config
})
 

4.serve看效果

``

1.2.生產環境下移除所有log函式

1.安裝依賴

$ npm i babel-plugin-transform-remove-console -D

2.babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "transform-remove-console",
  ]
}

就是這樣,但是這樣你開發的時候也沒得看報錯了

3.優化前面的babel配置

// 1.定義生產環境的外掛陣列,只在生產環境下生效
const ProdPlugins = []
if (process.env.NODE_ENV === 'production') {
  ProdPlugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 2.釋出產品的外掛陣列
    ...ProdPlugins
  ]
}
 

1.3.生成專案打包報告

打包時,為了直觀地發現專案中存在的問題,可以在打包時生成報告。生成報告的方式有兩種:

1.命令列引數

$ vue-cli-service build --report

2.通過視覺化的uiWeb面板檢視報告(推薦)

在視覺化的U面板中,通過控制和分析面板,可以方便地看到專案中所存在的問題。

1.4.寫vue.config.js修改webpack配置

//vue.config.js
// 這個檔案中,應該匯出一個包含了自定義選項的物件
module.exports = {
	//..
}

1.5.main-dev.js和main-pro.js

• 開發模式的入口檔案為main-dev.js

• 釋出模式的入口檔案為src/main-prod.js

• ConfigureWebpack 和 chainWebpack

在vue.configjs匯出的配置物件中,新增configureWebpack或chainWebpack節點,來自定義webpack的打包配置。

在這裡, configureWebpack和chainWebpack的作用相同,唯一的區別就是它們修改webpack配置的方式不同：

• chainWebpack通過鏈式程式設計的形式,來修改預設的webpack配置

• configureWebpack通過操作物件的形式,來修改預設的webpack配置

1.通過 chainWebPack自定義打包入口

module.exports = {
  chainWebPack: (config) => {
    config.when(process.env.NODE_ENV === 'production', (config) => {
        config.entry('app').clear().add('./main-pro.js')
    })
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./main-dev.js')
    })
  }
}

1.6.通過externals載入外部CDN資源

預設情況下,通過import語法匯入的第三方依賴包,最終會被打包合併到同一個檔案中,從而導致打包成功後,單檔案體積過大的問題, 專案優化,就要打包單檔案體積越小越好!!!

同時,需要在public/index.html檔案的頭部,新增如下的CDN資源引用:

module.exports = {
  chainWebpack: config => {
    // 釋出模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-pro.js')

      // externals載入外部CDN
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        nprogress: 'NProgress',
        'mavon-editor': 'mavonEditor'
      })
    })

    // 開發模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

1.先在ui環境下build一下看看單檔案大小

我們看著完全沒有優化的 單檔案體積為 680kb

2.開始優化

就是依賴庫的 js和css依賴, 用傳統的方法匯入 public/index.html

再跑一下,

變成500kb, 還是有感嘆號,那是因為element-ui還是用npm匯入的,佔了580kb

同樣的,在public/index.html匯入jscss

再跑一下,

變成150kb

1.7.首頁內容根據環境定製

不同的打包環境下,首頁內容可能會有所不同。我們可以通過外掛的方式進行定製,外掛配置如下:

需求: 開發環境我們的title是 DEV-電商, 釋出環境是 電商管理系統

module.exports = {
  chainWebpack: config => {
    // 釋出模式
    config.when(process.env.NODE_ENV === 'production', config => {

			// 根據環境渲染定製化內容
			config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })


    // 開發模式
    config.when(process.env.NODE_ENV === 'development', config => {

      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
      
    })
  }
}

2. 在public/index.html中使用

  <!-- 按需要渲染頁面的標題 -->
  <title><%= htmlWebpackPlugin.options.title ? '' : 'DEV-' %>電商管理系統</title>
  <!-- 按需要載入外部的CDN資源 -->
  <% if(htmlWebpackPlugin.options.isProd) { %>
    <!-- <script src="cdn.js"> -->
    <% } %>

1.8.VueRouter懶載入

當打包構建專案時, JavaScript包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。

1.安裝@babel/plugin-syntax-dynamic-import包

$ npm i babel/plugin-syntax-dynamic-import -D

2.在babel.config.js配置檔案中宣告該外掛。

moodule.exports = {
	plugins: [
		...prodPlugins,
		// 宣告該外掛。
		'@babel/plugin-syntax-dynamic-import',
	]
}

3. 將路由改為按需載入的形式,示例程式碼如下(router/index.js):

2.專案上線相關配置

### 2.1 通過 node 建立 web 伺服器

$ cd Desktop

$ mkdir WebApps

$ cd WebApps

$ mkdir hg && cd hg

$ npm init -y

$ npm i express -S

1.建立app.js檔案

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(3980, () => {
  console.log('hg at  http://localhost:3980');
})

node app.js

2.2 開啟 gzip 配置

使用gzip可以減小檔案體積,使傳輸速度更快。
可以通過伺服器端使用Express做gzip壓縮。其配置如下:

$ npm i compression -D

// usage
const compression = require('compression')
// 啟用壓縮中介軟體
app.use(compression())

一定要寫在: app.use(express.static('./dist')) 之前!!!

f12優化效果

2.3 配置 https 服務

None

2.4 使用 pm2 守護執行專案

1,安裝pm2

$ npm i pm2 -g

2,啟動專案:

$ pm2 start  app.js --name 自定義應用起名

3, 檢視執行專案

$ pm2 ls

4, 重啟專案

$ pm2 restart 自定義應用名稱

5.停止專案

$ pm2 stop 自定義應用名稱

6,刪除專案

$ pm2 delete 自定義應用名稱