第vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟項(xiàng)目完成，我們會(huì)將項(xiàng)目進(jìn)行上線，為了提升性能，我們往往會(huì)進(jìn)行一些優(yōu)化處理

vue項(xiàng)目的打包

腳手架項(xiàng)目中有一個(gè)默認(rèn)的打包命令,我們可以輸入npmrunbulid來對(duì)項(xiàng)目進(jìn)行打包

打開終端，切換到項(xiàng)目根目錄

輸入命令：npmrunbuild

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

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

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

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

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

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

varexpress=require(express)

constpath=require(path)

//2.創(chuàng)建服務(wù)器

varapp=express();

//托管靜態(tài)資源

//也可以將所有靜態(tài)資源放置到指定的目錄下，如public,然后添加以下的配置

app.use(express.static(dist))

app.use(/,express.static(path.join(__dirname,dist)))

//3.開啟服務(wù)器并監(jiān)聽端口

app.listen(3001,()={

console.log(:3001)

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

在服務(wù)器目錄下打開終端，輸入nodeapp.js

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

項(xiàng)目的常見優(yōu)化

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

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

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

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

生成項(xiàng)目報(bào)告文件

npmrunbuild--report

打開報(bào)告頁面

1.報(bào)告頁面中，越大的塊說明這個(gè)模板占用的體積越大

2.占用體積越越大的模塊，我們要考慮不將其打包到產(chǎn)品中

cdn加速優(yōu)化

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

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

vue.config.js

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

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

添加包的排除

module.exports={

configureWebpack:{

externals:{

vue:Vue,

element-ui:ELEMENT,

quill:Quill

可以看到，打包后的項(xiàng)目體積顯著的減少，但是，問題并沒有解決，由于沒有這些包，打包后的項(xiàng)目并不能運(yùn)行

這是因?yàn)?，現(xiàn)在打包的項(xiàng)目中，已經(jīng)沒有Vue這個(gè)包了，所以才會(huì)出現(xiàn)錯(cuò)誤，我們現(xiàn)在需要使用cdn的方式來提供這些資源

添加cdn的用戶自定義

vue.config.js中加入下面代碼

letcdn={

css:[

//element-uicss

/element-ui/lib/theme-chalk/index.css,//樣式表

//富文本框插件樣式

/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css

js:[

//vuemustatfirst!

/vue/dist/vue.js,//vuejs

//element-uijs

/element-ui/lib/index.js,//elementUI

//富文本框插件

/ajax/libs/quill/2.0.0-dev.4/quill.js

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

掛載資源到插件

module.exports={

//添加打包排除，說明以下配置中的包將來不會(huì)打包到項(xiàng)目中

configureWebpack:{

externals:{

vue:Vue,

element-ui:ELEMENT,

quill:Quill

//將cdn的資源掛載到插件上

chainWebpack(config){

config.plugin(html).tap(args={

args[0].cdn=cdn

returnargs

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

添加css引入(head結(jié)構(gòu)中）

%for(varcssofhtmlWebpackPlugin.options.cdn.css){%

linkrel=stylesheethref=%=css%/

%}%

添加js引入(body結(jié)構(gòu)中)

%for(varjsofhtmlWebpackPlugin.options.cdn.js){%

scriptsrc=%=js%/script

%}%

重新打包，OK

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

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

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