一.專案優化策略

1.生成打包報告
2.第三方庫啟用CDN
3.Element-ui元件按需載入
4.首頁內容定製
5.路由懶載入

1.生成打包報告

1.1通過vue-cli的UI面板直接檢視

1.2通過命令列引數生成報告

// 生成report.html分析報告
vue-cli-service build --report

2.修改webpack配置

https://cli.vuejs.org/zh/config/#vue-config-js

如果有修改webpack預設配置的需求，可以在專案根目錄建立vue.config.js配置檔案

2.1為開發模式與釋出模式指定不同的打包入口

module.exports = {
  chainWebpack: config => {
    // 指定釋出模式打包入口  
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
    })

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

2.2通過externals載入外部CDN資源

預設情況下，通過import匯入的第三方依賴包最終會被打包合併到一個檔案中，導致打包後單檔案體積過大。所以我們需要通過webpack的externals節點，配置載入外部CDN資源，凡是宣告在externals中的第三方依賴包都不會被打包。

1. 配置vue.config.js檔案

   module.exports = {
     chainWebpack: config => {
       // 指定釋出模式打包入口  
       config.when(process.env.NODE_ENV === 'production', config => {
         config
           .entry('app')
           .clear()
           .add('./src/main-prod.js')
   
         // 使用externals載入外部CDN資源
         config.set('externals', {
           vue: 'Vue',
           'vue-router': 'VueRouter',
           axios: 'axios',
           lodash: '_',
           echarts: 'echarts',
           nprogress: 'NProgress',
           'vue-quill-editor': 'VueQuillEditor'
         })
       })
   
       // 指定開發模式打包入口
       config.when(process.env.NODE_ENV === 'development', config => {
         config
           .entry('app')
           .clear()
           .add('./src/main-dev.js')
       })
     }
   }
   
    
   

2. 在public/index.html檔案頭部，新增第三方依賴包的js和css樣式的CDN引用

   [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-MNWKI4Ry-1604394495531)(https://s1.ax1x.com/2020/11/03/Bsfrcj.png)]

3.通過CDN載入element-ui的元件

1. 在main-prod.js中，註釋掉element-ui按需載入的程式碼

   // import './plugins/element.js'
   

2. 在index.html頭部，通過CDN載入element-ui的js和css

4.首頁內容定製（看需求決定用不用）

不同打包環境下，首頁內容頁可能不同，可以通過外掛進行配置

1. 配置vue.config.js檔案

   module.exports = {
     chainWebpack: config => {
       // 指定釋出模式打包入口  
       config.when(process.env.NODE_ENV === 'production', config => {
         config
           .entry('app')
           .clear()
           .add('./src/main-prod.js')
   
         // 使用externals載入外部CDN資源
         config.set('externals', {
           vue: 'Vue',
           'vue-router': 'VueRouter',
           axios: 'axios',
           lodash: '_',
           echarts: 'echarts',
           nprogress: 'NProgress',
           'vue-quill-editor': 'VueQuillEditor'
         })
   
         config.plugin('html').tap(args => {
           args[0].isProd = true
           return args
         })
       })
   
       // 指定開發模式打包入口
       config.when(process.env.NODE_ENV === 'development', config => {
         config
           .entry('app')
           .clear()
           .add('./src/main-dev.js')
   
         config.plugin('html').tap(args => {
           args[0].isProd = false
           return args
         })
       })
     }
   }
   

2. 在public/index.html中，根據isProd的值，決定如何渲染頁面結構

   <!- 按需渲染頁面標題 -->
   <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>標題</title>
       
   <!- 按需載入外部CDN -->
   <% if(htmlWebpackPlugin.options.isProd){ %>
       <!- 通過externals載入的外部CDN資源 -->
   <% } %>
   

5.路由懶載入

當打包構建專案時，JavaScriot包會變得非常大，影響頁面載入。所以我們將不同路由對應的元件分割成不同的程式碼塊，當路由被訪問時才載入對應元件。

1. 安裝外掛包

   開發依賴 @babel/plugin-syntax-dynamic-import
   

2. 在babel.config.js中的plugins宣告該外掛

   '@babel/plugin-syntax-dynamic-import'
   

3. 將路由改為按需載入的形式

   const Foo = () => import(/* webpackChunkName: "grounp-foo" */ './Foo.vue')
   const Bar = () => import(/* webpackChunkName: "grounp-foo" */ './Bar.vue')
   const Baz = () => import(/* webpackChunkName: "grounp-boo" */ './Baz.vue')
   

二.專案上線配置

1.通過node建立web伺服器
2.開啟gzip配置
3.配置https服務
4.使用pm2管理應用

1.通過node建立web伺服器

建立node專案，並安裝express,通過express快速建立web伺服器，將vue打包生成的dist資料夾託管為靜態資源即可。

npm init -y
npm i express -S

// 新建app.js
const express = require('express')
const app = express()

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

app.listen(80, () => {
  console.log('server running at http://127.0.0.1')
})

2.開啟gzip配置

使用gzip可以減小檔案體積，傳輸速度更快。

npm install compression -D

const compression = require('compression')
app.use(compression())

const express = require('express')
const compression = require('compression')
const app = express()

// 一定要把這一行程式碼，寫到 靜態資源託管之前
app.use(compression())
app.use(express.static('./dist'))

app.listen(80, () => {
  console.log('server running at http://127.0.0.1')
})

3.配置HTTPS服務（一般後端去做，瞭解即可）

傳統的http都是明文，不安全，所以使用https進行加密處理，防止資料竊取

1. 申請SSL證書

2. 證書匯入

const https = require('https')
const fs = require('fs')
const options = {
  cert: fs.readFileSync('./full_chain.pem'),
  key: fs.readFileSync('./private.key')
}
https.createServer(options, app).listen(443)

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')
const app = express()

const options = {
  cert: fs.readFileSync('./full_chain.pem'),
  key: fs.readFileSync('./private.key')
}

// 一定要把這一行程式碼，寫到 靜態資源託管之前
app.use(compression())
app.use(express.static('./dist'))

// http服務
// app.listen(80, () => {
//   console.log('server running at http://127.0.0.1')
// })

// https服務
https.createServer(options, app).listen(443)

4.使用pm2管理應用

終端視窗使用node開啟服務後，不能關閉。所以使用pm2管理應用，解放終端視窗。

pm2使用：
啟動專案：pm2 start指令碼 --name自定義名稱
檢視執行專案：pm2 ls
重啟專案：pm2 restart 自定義名稱
停止專案：pm2 stop 自定義名稱
刪除專案：pm2 delete 自定義名稱

npm i pm2 -g
pm2 start .\app.js --name demo_vue