vue項目優化與上線

一.項目優化策略

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配置

//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)(//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 //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 //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 //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
Tags:

VirMach 便宜 VPS

QNews

QNews