vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟
vue項(xiàng)目的打包上線及優(yōu)化
項(xiàng)目完成,我們會(huì)將項(xiàng)目進(jìn)行上線,為了提升性能,我們往往會(huì)進(jìn)行一些優(yōu)化處理
vue項(xiàng)目的打包
腳手架項(xiàng)目中有一個(gè)默認(rèn)的打包命令,我們可以輸入npm run bulid來對(duì)項(xiàng)目進(jìn)行打包
打開終端,切換到項(xiàng)目根目錄
輸入命令:npm run build
會(huì)在當(dāng)前項(xiàng)目的根目錄下生成一個(gè)dist文件夾,里面就是打包后的文件
項(xiàng)目托管
我們可以創(chuàng)建一個(gè)簡(jiǎn)易的node服務(wù)器來托管打包后的項(xiàng)目,這樣就可以模擬訪問服務(wù)器的項(xiàng)目
1.創(chuàng)建一個(gè)新的目錄做為服務(wù)器根目錄,小黑窗執(zhí)行node init -y執(zhí)行初始化,再執(zhí)行npm i express下載express包,然后創(chuàng)建app.js文件將下面代碼拷貝進(jìn)來(利用express包開一個(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. 開啟服務(wù)器并監(jiān)聽端口 app.listen(3001, () => { console.log('http://127.0.0.1:3001') })
啟動(dòng)服務(wù)器
在服務(wù)器目錄下打開終端,輸入node app.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)目的資源的分布(占用)情況:npm run build – --report
生成項(xiàng)目報(bào)告文件
npm run build – --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中加入下面代碼
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' ] }
通過插件將資源自動(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 return args }) } }
在頁面中使用插件添加指定的cdn資源,在項(xiàng)目中的public中index中加入下面代碼(項(xiàng)目打包前的index文件)
添加css引入(head結(jié)構(gòu)中)
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="stylesheet" href="<%=css%>" /> <% } %>
添加js引入(body結(jié)構(gòu)中)
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=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)注入相應(yīng)的資源文件到html頁面
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 = { // 添加打包排除,說明以下配置中的包將來不會(huì)打包到項(xiàng)目中 configureWebpack: { externals }, // chainWebpack (config) { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) } }
到此這篇關(guān)于vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue項(xiàng)目打包以及優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
警告[vue-router]?Duplicate?named?routes?definition簡(jiǎn)單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個(gè)錯(cuò)誤提示是因?yàn)樵赩ue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)
這篇文章主要介紹了vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03