目錄

• 專案的打包上線及優化
• vue專案的打包
• 專案託管
• 專案的常見優化

vue專案的打包上線及優化

專案完成，我們會將專案進行上線，為了提升效能，我們往往會進行一些優化處理

vue專案的打包

腳手架專案中有一個預設的打包命令,我們可以輸入npm run bulid來對專案進行打包

開啟終端，切換到專案根目錄

輸入命令：npm run build

會在當前專案的根目錄下生成一個dist資料夾，裡面就是打包後的檔案

專案託管

我們可以建立一個簡易的node伺服器來託管打包後的專案，這樣就可以模擬訪問伺服器的專案

1.建立一個新的目錄做為伺服器根目錄，小黑窗執行node init -y執行初始化，再執行npm i express下載express包，然後建立app.檔案將下面程式碼拷貝進來(利用express包開一個伺服器)

2.將剛剛打包生成的dist目錄整體拷貝到node伺服器目錄下

3.資源在dist目錄下，所以可以使用靜態資源託管的方式提供資源，將dist目錄做為資源託管目錄

express建立伺服器

var express = require('express')
const path = require('path')

// 2. 建立伺服器
var app = express();

// 託管靜態資源
// 也可以將所有靜態資源放置到指定的目錄下，如public,然後新增以下的配置
app.use(express.static('dist'))
app.use('/',express.static(path.join(__dirname,'dist')))

// 3. 開啟伺服器並監聽埠
app.listen(3001,() => {
  console.log('http://127.0.0.1:3001')
})

啟動伺服器

在伺服器目錄下開啟終端，輸入node app.js

在瀏覽器中輸入伺服器地址

專案的常見優化

專案打包之後，會將之前所使用到的部署依賴包和專案中使用到的外部資源都打包

如果之前引入的包很多，或者引入的不必需的包，那麼會增大專案的體積，從而造成使用者訪問的時候需要請求更多的資料才能正常的訪問，不利於使用者體驗，所以需要對打包過程進行優化

一般情況下我們可以從優化程式碼的方面對專案進行優化，也可以使用類似cdn的方式對專案進行優化

腳手架中提供了一個命令，可以讓我們看到專案的資源的分佈(佔用)情況：npm run build – --report

生成專案報告檔案

npm run build – --report

開啟報告頁面

1.報告頁面中，越大的塊說明這個模板佔用的體積越大
2.佔用體積越越大的模組，我們要考慮不將其打包到產品中

cdn加速優化

cdn: CDN的本質上是將媒體資源，動靜態圖片（Flash），HTML，，JS等等內容快取到距離你更近的IDC，從而讓使用者進行共享資源，實現縮減站點間的響應時間等等需求，而網遊加速器的本質則是通過建立高頻寬機房，架設多節點伺服器來為使用者進行加速。

我們可以將一些大體積的模組，讓cdn幫我們提供相應的資源，這樣就可以緩解我們自己的伺服器的壓力，同時提供更快更好的資源響應

vue.config.js

在腳手架專案中，如果想增加自己的專案配置，可以在根目錄下新增vue.config.js檔案，在這個檔案中實現自定義的配置

在打包的時候，這個配置會和腳手架的配置組合到一起

新增包的排除

module.exports = {
    configureWebpack: {
        externals:{
            'vue': 'Vue','element-ui': 'ELEMENT','quill': 'Quill'
        }
    },}

可以看到，打包後的專案體積顯著的減少，但是，問題並沒有解決，由於沒有這些包，打包後的專案並不能執行

這是因為，現在打包的專案中，已經沒有Vue這個包了，所以才會出現錯誤，我們現在需要使用cdn的方式來提供這些資源

新增cdn的使用者自定義

vue.config.js中加入下面程式碼

let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 樣式表
    // 富文字框外掛樣式
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ],js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js',// vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js',// elementUI
    // 富文字框外掛
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

通過外掛將資源自動的新增到頁面中

掛載資源到外掛

module.exports = {
  // 新增打包排除，說明以下配置中的包將來不會打包到專案中
  configureWebpack: {
    externals:{
            'vue': 'Vue','quill': 'Quill'
        }
  },// 將cdn的資源掛載到外掛上
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

在頁面中使用外掛新增指定的cdn資源，在專案中的public中index中加入下面程式碼(專案打包前的index檔案)

新增css引入(head結構中）

<% for(var css of htmlWebpackcJVaoDwmnPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%&www.cppcns.comgt;" />
<% } %>

新增js引入(body結構中)

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

重新打包，OK

設定只有產品階段才使用cdn

在專案開發的時候，其實沒有必要使用cdn,這樣反而會讓我們的頁面載入效率下降，同時也不適合本地開發(需要連網)

我們可以根據環境變數進行相應的處理，只有在產品的時候，才讓外掛去自動注入相應的資原始檔到html頁面

const isProd = process.env.NODE_ENV === 'production' // 是否生產環境

let externals = {
  'vue': 'Vue','quill': 'Quill'
}


let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// elemcJVaoDwmnentUI
    // 富文字框外掛
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

cdn = isProd ? cdn : { css: [],js: [] }
externals = isProd ? externals : {}


module.exports = {
  // 新增打包排除，說明以下配置中的包將來不會打包到專案中
  configureWebpack: {
    externals
  },cJVaoDwmn// 
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return arghttp://www.cppcns.coms
    })
  }
}

到此這篇關於vue專案打包以及優化的實現步驟的文章就介紹到這了,更多相關vue專案打包以及優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！