vue項目打包以及優(yōu)化的實(shí)現步驟

目錄

vue項目的打包上線(xiàn)及優(yōu)化

項目完成，我們會(huì )將項目進(jìn)行上線(xiàn)，為了提升性能，我們往往會(huì )進(jìn)行一些優(yōu)化處理

vue項目的打包

腳手架項目中有一個(gè)默認的打包命令,我們可以輸入npm run bulid來(lái)對項目進(jìn)行打包

打開(kāi)終端，切換到項目根目錄

輸入命令：npm run build

會(huì )在當前項目的根目錄下生成一個(gè)dist文件夾，里面就是打包后的文件

項目托管

我們可以創(chuàng )建一個(gè)簡(jiǎn)易的node服務(wù)器來(lái)托管打包后的項目，這樣就可以模擬訪(fǎng)問(wèn)服務(wù)器的項目

1.創(chuàng )建一個(gè)新的目錄做為服務(wù)器根目錄，小黑窗執行node init -y執行初始化，再執行npm i express下載express包，然后創(chuàng )建app.js文件將下面代碼拷貝進(jìn)來(lái)(利用express包開(kāi)一個(gè)服務(wù)器)

2.將剛剛打包生成的dist目錄整體拷貝到node服務(wù)器目錄下

3.資源在dist目錄下，所以可以使用靜態(tài)資源托管的方式提供資源，將dist目錄做為資源托管目錄

express創(chuàng )建服務(wù)器

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

// 2. 創(chuàng  )建服務(wù)器
var app = express();

// 托管靜態(tài)資源
// 也可以將所有靜態(tài)資源放置到指定的目錄下，如public,然后添加以下的配置
app.use(express.static('dist'))
app.use('/', express.static(path.join(__dirname, 'dist')))

// 3. 開(kāi)啟服務(wù)器并監聽(tīng)端口
app.listen(3001, () => {
  console.log('http://127.0.0.1:3001')
})

啟動(dòng)服務(wù)器

在服務(wù)器目錄下打開(kāi)終端，輸入node app.js

在瀏覽器中輸入服務(wù)器地址

項目的常見(jiàn)優(yōu)化

項目打包之后，會(huì )將之前所使用到的部署依賴(lài)包和項目中使用到的外部資源都打包

如果之前引入的包很多，或者引入的不必需的包，那么會(huì )增大項目的體積，從而造成用戶(hù)訪(fǎng)問(wèn)的時(shí)候需要請求更多的數據才能正常的訪(fǎng)問(wèn)，不利于用戶(hù)體驗，所以需要對打包過(guò)程進(jìn)行優(yōu)化

一般情況下我們可以從優(yōu)化代碼的方面對項目進(jìn)行優(yōu)化，也可以使用類(lèi)似cdn的方式對項目進(jìn)行優(yōu)化

腳手架中提供了一個(gè)命令，可以讓我們看到項目的資源的分布(占用)情況：npm run build – --report

生成項目報告文件

npm run build – --report

打開(kāi)報告頁(yè)面

1.報告頁(yè)面中，越大的塊說(shuō)明這個(gè)模板占用的體積越大
2.占用體積越越大的模塊，我們要考慮不將其打包到產(chǎn)品中

cdn加速優(yōu)化

cdn: CDN的本質(zhì)上是將媒體資源，動(dòng)靜態(tài)圖片（Flash），HTML，CSS，JS等等內容緩存到距離你更近的IDC，從而讓用戶(hù)進(jìn)行共享資源，實(shí)現縮減站點(diǎn)間的響應時(shí)間等等需求，而網(wǎng)游加速器的本質(zhì)則是通過(guò)建立高帶寬機房，架設多節點(diǎn)服務(wù)器來(lái)為用戶(hù)進(jìn)行加速。

我們可以將一些大體積的模塊，讓cdn幫我們提供相應的資源，這樣就可以緩解我們自己的服務(wù)器的壓力，同時(shí)提供更快更好的資源響應

vue.config.js

在腳手架項目中，如果想增加自己的項目配置，可以在根目錄下添加vue.config.js文件，在這個(gè)文件中實(shí)現自定義的配置

在打包的時(shí)候，這個(gè)配置會(huì )和腳手架的配置組合到一起

添加包的排除

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

可以看到，打包后的項目體積顯著(zhù)的減少，但是，問(wèn)題并沒(méi)有解決，由于沒(méi)有這些包，打包后的項目并不能運行

這是因為，現在打包的項目中，已經(jīng)沒(méi)有Vue這個(gè)包了，所以才會(huì )出現錯誤，我們現在需要使用cdn的方式來(lái)提供這些資源

添加cdn的用戶(hù)自定義

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'
  ]
}

通過(guò)插件將資源自動(dòng)的添加到頁(yè)面中

掛載資源到插件

module.exports = {
  // 添加打包排除，說(shuō)明以下配置中的包將來(lái)不會(huì )打包到項目中
  configureWebpack: {
    externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'quill': 'Quill'
        }
  },
  // 將cdn的資源掛載到插件上
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

在頁(yè)面中使用插件添加指定的cdn資源，在項目中的public中index中加入下面代碼(項目打包前的index文件)

添加css引入(head結構中）

<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>" />
<% } %>

添加js引入(body結構中)

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

重新打包，OK

設置只有產(chǎn)品階段才使用cdn

在項目開(kāi)發(fā)的時(shí)候，其實(shí)沒(méi)有必要使用cdn,這樣反而會(huì )讓我們的頁(yè)面加載效率下降，同時(shí)也不適合本地開(kāi)發(fā)(需要連網(wǎng))

我們可以根據環(huán)境變量進(jìn)行相應的處理，只有在產(chǎn)品的時(shí)候，才讓插件去自動(dòng)注入相應的資源文件到html頁(yè)面

const isProd = process.env.NODE_ENV === 'production' // 是否生產(chǎn)環(huán)境

let externals = {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'quill': 'Quill'
}


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'
  ]
}

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


module.exports = {
  // 添加打包排除，說(shuō)明以下配置中的包將來(lái)不會(huì )打包到項目中
  configureWebpack: {
    externals
  },
  // 
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

到此這篇關(guān)于vue項目打包以及優(yōu)化的實(shí)現步驟的文章就介紹到這了,更多相關(guān)vue項目打包以及優(yōu)化內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！