從0到1搭建element后臺(tái)框架優(yōu)化篇(打包優(yōu)化)
前言
hello,咱又見(jiàn)了~~嘻嘻。本次主要來(lái)說(shuō)說(shuō)這個(gè)打包優(yōu)化的問(wèn)題。一個(gè)vue項(xiàng)目從開(kāi)發(fā)到上線必須得經(jīng)歷打包過(guò)程，一個(gè)項(xiàng)目的打包優(yōu)化與否都決定了你這個(gè)項(xiàng)目的運(yùn)行速度以及用戶(hù)體驗(yàn)。本次主要是針對(duì)vue.config,js的配置進(jìn)行優(yōu)化。項(xiàng)目地址
開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境
開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境的配置也是開(kāi)發(fā)中的必不可少的一環(huán)。本項(xiàng)目是由vue-cli3開(kāi)發(fā)，vue-cli3深度集成了webpack,如果不熟悉vue-cli3可以先去官網(wǎng)看看相關(guān)配置。
開(kāi)發(fā)環(huán)境
在項(xiàng)目根目錄下新建.env.development文件表明是開(kāi)發(fā)環(huán)境。
VUE_APP_CURRENTMODE ="development" //當(dāng)前的環(huán)境 VUE_APP_LOGOUT_URL="http://localhost:3000/" //開(kāi)發(fā)環(huán)境的地址
生產(chǎn)環(huán)境
在項(xiàng)目根目錄下新建.env.production文件表明是生產(chǎn)環(huán)境。
VUE_APP_CURRENTMODE ="development" //當(dāng)前的環(huán)境 VUE_APP_LOGOUT_URL="xxx" //生產(chǎn)環(huán)境的地址
當(dāng)然你也可以自己創(chuàng)建一個(gè)測(cè)試環(huán)境.env.test,同樣可以像上邊一樣配置。
環(huán)境運(yùn)用
那么接下來(lái)我們?cè)趺从盟兀窟@里不得不說(shuō)一下的是package.json里面的兩個(gè)命令serve,build,其實(shí)對(duì)應(yīng)的是全命令是vue-cli-service serve --mode development,vue-cli-service build --mode production,如果你想要在構(gòu)建命令中使用開(kāi)發(fā)環(huán)境變量，那么可以加入
"dev-build": "vue-cli-service build --mode development"
接下來(lái)在vue.config.js運(yùn)用它。
config.plugin('define').tap(args => {
args[0]['process.env'].VUE_APP_LOGOUT_URL = JSON.stringify(process.env.VUE_APP_LOGOUT_URL)
console.log(args[0])
return args;
});
這里有必要說(shuō)下，這段代碼是寫(xiě)在chainWebpack配置項(xiàng)下面。這段代碼其實(shí)運(yùn)用了兩個(gè)webpack插件webpack-chain允許配置鏈?zhǔn)讲僮?，以及webpack.DefinePlugin。
- webpack-chain：嘗試通過(guò)提供可鏈?zhǔn)交蝽樍魇降?API 創(chuàng)建和修改webpack 配置。了解更多
- webpack.DefinePlugin：它的作用是定義全局常量，是常量。即在模塊用它定義的全局常量，那么你就不能改變它。也就是說(shuō)我定義了一個(gè)process.env.VUE_APP_LOGOUT_URL常量，在src文件夾下面都可以使用。了解更多
分包（code splitting）
首先思考，我們引入的第三方包與我們的業(yè)務(wù)代碼一起打包會(huì)產(chǎn)生什么問(wèn)題？
顧名思義，我們的業(yè)務(wù)代碼變動(dòng)比較頻繁,而我們引入的第三方包基本上不會(huì)變動(dòng)。瀏覽器會(huì)有緩存，沒(méi)有變動(dòng)的文件會(huì)直接從緩存中讀取，這也間接的優(yōu)化了網(wǎng)站的訪問(wèn)速速。
接下來(lái)配置vue.config.js,
分割第三方庫(kù)
//代碼分割
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: 'all',
cacheGroup:{
//vue2-editor單獨(dú)打一個(gè)包
vueEdior: {
name: 'vueEdior',
test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
priority: 10 // 優(yōu)先級(jí)要大于 vendors 不然會(huì)被打包進(jìn) vendors
},
//其余的第三方包打進(jìn)vendor
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
})
分割共用文件
組件是vue項(xiàng)目的重要組成部分。相當(dāng)一部分組件都可以公用，在不同的文件中引入，因此我們可以將這部分公用的組件直接分割出來(lái)。
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: 'all',
cacheGroup:{
vueEdior: {
name: 'vueEdior',
test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
priority: 10 // 優(yōu)先級(jí)要大于 vendors 不然會(huì)被打包進(jìn) vendors
},
public: {
name: 'public',
test: resolve('src/components'),
minSize: 0, //表示在壓縮前的最小模塊大小,默認(rèn)值是 30kb
minChunks: 2, // 最小公用次數(shù)
priority: 5, // 優(yōu)先級(jí)
reuseExistingChunk: true // 公共模塊必開(kāi)啟
},
//其余的第三方包打進(jìn)vendor
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
})
打包完后會(huì)發(fā)現(xiàn)dist/static/js,多了一個(gè)vueEditor和public文件，這就表明分割完成。
map文件處理和別名設(shè)置(alias)
map文件
我們可以進(jìn)一步優(yōu)化，打包默認(rèn)生成map文件,從而導(dǎo)致包的體積過(guò)大，這時(shí)我們需要設(shè)定一個(gè)屬性來(lái)關(guān)閉它。
productionSourceMap: false
別名設(shè)置
alias運(yùn)用的好處在于不用一級(jí)級(jí)的去找，而是直接鎖定位置，從而減少文件搜索時(shí)間。
//設(shè)置別名
config.resolve.alias
.set('@', resolve('src'))
.set('@api', resolve('src/api/api'))//接口地址
.set('@assets', resolve('src/assets'))
gzip壓縮與去console插件
如果上面的方式都編寫(xiě)了，文件依舊過(guò)大，這個(gè)時(shí)候不得不考慮代碼壓縮和去掉console插件了，可以說(shuō)為了優(yōu)化項(xiàng)目，“無(wú)所不用其極”。
gzip壓縮
首先安裝開(kāi)始安裝
cnpm install compression-webpack-plugin --save-dev
然后在configureWebpack里面配置它
const CompressionWebpackPlugin = require('compression-webpack-plugin')
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
['js', 'css'].join('|') +
')$',
),
threshold: 10240,
minRatio: 0.8,
}),
值得注意的是gzip壓縮文件需要后端來(lái)配合支持，如果后端沒(méi)有支持那么項(xiàng)目加載的依舊是沒(méi)有壓縮的文件。
去console插件
首先安裝
cnpm install uglifyjs-webpack-plugin --save-dev
然后在configureWebpack里面配置它
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
}),
cdn引入
有的同學(xué)說(shuō)后端沒(méi)有支持gzip壓縮加載，那怎么辦?那只有涼拌咯~~~。
這里給大家介紹一個(gè)cdn引入的方式，有的第三方插件太大，導(dǎo)致單獨(dú)分包后還是挺大的，這個(gè)時(shí)候可以考慮用cdn的方式引入文件。
無(wú)插件引入cdn
首先我們不讓webpack打包用cdn引入的文件
//對(duì)一些不經(jīng)常改動(dòng)的庫(kù)，可以通過(guò)cdn引入，webpack不對(duì)他們打包
let externals = {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'echarts': 'echarts',
'vue2-editor': 'VueEditor'
}
然后配置cdn
const cdn = {
css: [
//element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
],
js: [
//vue
'https://unpkg.com/vue@2.6.10/dist/vue.min.js',
//axios
'http://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
//vuex
'https://unpkg.com/vuex@3.1.0/dist/vuex.min.js',
//vue-router
'https://unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
//element
'https://unpkg.com/element-ui@2.7.2/lib/index.js',
//echarts
'https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js',
//vue2-editor
"https://unpkg.com/vue2-editor@2.6.6/dist/vue2-editor.js"
]
}
接下來(lái)在chainWebpack配置
process.env.VUE_APP_CURRENTMODE === 'production') {
config.externals(externals)//忽略打包
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args
})
}
這里需要解釋的是config.plugin('html')其實(shí)是運(yùn)用了 html-webpack-plugin插件在其實(shí)例化的options掛載cdn對(duì)象，然后通過(guò)ejs模板語(yǔ)法，讀取相關(guān)cdn。
緊接著我們需要在public/index.html中讀取相關(guān)cdn
<% if (process.env.VUE_APP_CURRENTMODE === 'production') { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" rel="external nofollow" as="style">
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<% } %>
至此cdn引入完成
插件引入cdn
由于手動(dòng)引入cdn太過(guò)麻煩，而且擔(dān)心版本變化，每次都需要手動(dòng)去更改，所以為了更好的開(kāi)發(fā)體驗(yàn)，引入了自動(dòng)匹配cdn插件，webpack-cdn-plugin。接下來(lái)開(kāi)始安裝
cnpm install webpack-cdn-plugin --save
實(shí)例化插件
const cdnPlugin = require('webpack-cdn-plugin')
接下來(lái)開(kāi)始在configureWebpack中引用
new cdnPlugin({
modules: [
{ name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
{ name: 'axios', var: 'axios', path: 'dist/axios.min.js' },
{ name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' },
{ name: 'element-ui', var: 'ELEMENT', path: 'lib/index.js', style: 'lib/theme-chalk/index.css' },
{ name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' },
{ name: 'vue2-editor', var: 'VueEditor', path: 'dist/vue2-editor.js' },
{ name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' },
],
publicPath: '/node_modules'
})
- name:插件名
- var :項(xiàng)目中實(shí)例化的名字
- path：路徑名稱(chēng)
- style:css路徑名稱(chēng)
更多了解請(qǐng)參考官方文檔。
總體來(lái)說(shuō)引入第三方cdn確實(shí)能帶來(lái)不錯(cuò)的效果，但是有可能不穩(wěn)定，因此建議大家在實(shí)際開(kāi)發(fā)中自己去申請(qǐng)一個(gè)專(zhuān)屬的cdn域名，將網(wǎng)站所要用到庫(kù)直接上傳上去。
結(jié)語(yǔ)
本期的打包優(yōu)化就到這里啦！感覺(jué)有很多廢話(huà)。哈哈~~，最后感謝大家閱讀，如果有問(wèn)題以及錯(cuò)誤請(qǐng)及時(shí)指正。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能,具有基本四則運(yùn)算計(jì)算器以及科學(xué)計(jì)算器的功能,可實(shí)現(xiàn)開(kāi)方、乘方、三角函數(shù)以及公式運(yùn)算等功能,需要的朋友可以參考下2018-07-07
Vue3中使用Element-Plus的el-upload組件限制只上傳一個(gè)文件的功能實(shí)現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進(jìn)行文件上傳時(shí),有時(shí)候需要限制只能上傳一個(gè)文件,本文將介紹如何通過(guò)配置 el-upload 組件實(shí)現(xiàn)這個(gè)功能,讓你的文件上傳變得更加簡(jiǎn)潔和易用,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue事件的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案
這篇文章主要介紹了vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個(gè)匿名v-model的傳遞的話(huà),可以使用vue3.3新添加的編譯宏,defineModel來(lái)使用,每種方案結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue 3 中使用 OpenLayers 實(shí)時(shí)顯示 zoom
本文介紹了如何在 Vue 3 中使用 OpenLayers 來(lái)獲取地圖的 zoom 值以及四角坐標(biāo)信息,并實(shí)時(shí)更新數(shù)據(jù),這種方式可以用于 GIS 應(yīng)用開(kāi)發(fā),幫助用戶(hù)更好地了解當(dāng)前地圖范圍,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js路由組件vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)城市列表選擇功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07