1. 程式人生 > >前端架構師必備之Vue專案打包優化

前端架構師必備之Vue專案打包優化

前幾天聽老師講過前端架構師必備之Vue專案打包優化的課之後,有感而發利用空閒時間寫了一下。

大佬路過請留步知道一下,

使用vue-cli部署生產包時,發現資源包很大,打包後的vendor.js達到了1.4M,這已經很大了,而且會影響到首屏載入。那麼,怎麼優化呢?

1.元件按需載入

這是首先可以優化的點。如果頻繁使用了第三方元件/UI庫,如我的專案中經常同時使用了 element-ui, mint-ui,echarts等元件庫,如果全部引入,專案體積非常大,這時可以按需引入元件。

示例如下:

1.1 element-ui

首先,安裝 babel-plugin-component:

npm install babel-plugin-component -D

然後,將.babelrc 修改為:

{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
 [
 "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"
}

然後引入部分元件,這樣一來,就不需要引入樣式了,外掛會幫我們處理。

?

// main.js
import Vue from ‘vue’
import { Dialog, Loading } from ‘element-ui’

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然後正常使用元件

1.2 mint-ui

由於mint-ui是element-ui的移動端元件,所以它的使用和引入幾乎和element-ui一樣。

首先,安裝 babel-plugin-component:

npm install babel-plugin-component -D

然後,將.babelrc 修改為:

{
“presets”: [
[“es2015”, { “modules”: false }]
],
“plugins”: [[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]]
}
然後引入部分元件

// main.js
import Vue from ‘vue’
import { Toast, MessageBox } from ‘element-ui’

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然後正常使用元件
注意,element-ui和mint-ui不能同時在.babelrc中進行外掛設定,這種情況下,依然可以按需引入,但是不要在.babelrc中配置,在引入的地方同時引入css即可。

1.3 echarts

首先安裝babel-plugin-equire

npm i babel-plugin-equire -D

然後,在.babelrc檔案中新增該外掛

{

“plugins”: [
// other plugins

“equire”
]
}
建立一個js檔案

// echarts.js
// eslint-disable-next-line
const echarts = equire([
‘tooltip’,
‘candlestick’,
‘bar’,
‘line’,
‘axisPointer’,
‘legend’,
‘grid’
])
export default echarts

// 業務元件,引入echarts

import echarts from ‘@/assets/lib/echarts’

// 使用與以前一樣

按需載入echarts

解決vue-cli首屏載入慢的問題

2.路由懶載入

這裡需要一個外掛

vue-router官方推薦syntax-dynamic-import外掛,不過它要求同時安裝@bable/core^7.0.0,如果你安裝了babel-core6,是會有版本衝突的。我的做法如下

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)
// router.js
const login = () => import(’@/components/login’)
const router = new VueRouter({
routes: [
{ path: ‘/login’, component: login }
]
})
還有一種魔法註釋用法

有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk,一個特殊的註釋語法來提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: “group-foo” */ ‘./Foo.vue’)

3.非同步元件

如果元件在頁面載入時不需要,只在呼叫時用到,這時可以使用非同步元件的寫法。僅僅是引入和元件註冊寫法不同

// template

// script
components: {
test: () => import(’./test’) // 將元件非同步引入,告訴webpack,將該部分程式碼分割打包
},
methods:{
clickTest () {
this.showTest = !this.showTest
}
}
4.圖片的壓縮合並

無失真壓縮圖片:https://www.jb51.net/softs/605425.html

如有可能,將圖片製作成精靈圖

5.CDN加速

在index.html中引入cdn資源

... 修改 build/webpack.base.conf.js

module.exports = {
context: path.resolve(__dirname, ‘…/’),
entry: {

app: ‘./src/main.js’
},
externals:{

‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘vuex’:‘Vuex’,
‘vue-resource’: ‘VueResource’
},

}
修改src/main.js src/router/index.js 註釋掉import引入的vue,vue-resource

// import Vue from ‘vue’
// import VueResource from ‘vue-resource’
// Vue.use(VueResource)
6.壓縮程式碼

vue-cli已經使用UglifyJsPlugin 外掛來壓縮程式碼,可以設定成如下配置:

new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: [‘console.log’]
},
sourceMap: false
})
其中sourceMap: false是禁用除錯功能。

如果設為true,在部署包中會生成.map結尾的js檔案。它用於在程式碼混淆壓縮的情況下仍可進行除錯。這個功能雖好,但會大大增加整體資源包的體積,所以將其禁用。

以上就是本文的全部內容,希望對大家的學習有所幫助,
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:582735936,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。
需要vue專案打包優化視訊資料的可以加我
在這裡插入圖片描述