淺談vue項(xiàng)目打包優(yōu)化策略
使用vue-cli部署生產(chǎn)包時(shí),發(fā)現(xiàn)資源包很大,打包后的vendor.js
達(dá)到了1.4M,這已經(jīng)很大了,而且會(huì)影響到首屏加載。那么,怎么優(yōu)化呢?
1.組件按需加載
這是首先可以優(yōu)化的點(diǎn)。如果頻繁使用了第三方組件/UI庫(kù),如我的項(xiàng)目中經(jīng)常同時(shí)使用了 element-ui, mint-ui,echarts等組件庫(kù),如果全部引入,項(xiàng)目體積非常大,這時(shí)可以按需引入組件。
示例如下:
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" } ] ] }
然后引入部分組件,這樣一來,就不需要引入樣式了,插件會(huì)幫我們處理。
// 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的移動(dòng)端組件,所以它的使用和引入幾乎和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不能同時(shí)在.babelrc中進(jìn)行插件設(shè)置,這種情況下,依然可以按需引入,但是不要在.babelrc中配置,在引入的地方同時(shí)引入css即可。
1.3 echarts
首先安裝babel-plugin-equire
npm i babel-plugin-equire -D
然后,在.babelrc文件中添加該插件
{ "plugins": [ // other plugins ... "equire" ] }
創(chuàng)建一個(gè)js文件
// echarts.js // eslint-disable-next-line const echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid' ]) export default echarts // 業(yè)務(wù)組件,引入echarts import echarts from '@/assets/lib/echarts' // 使用與以前一樣
按需加載echarts
解決vue-cli首屏加載慢的問題
2.路由懶加載
這里需要一個(gè)插件
vue-router官方推薦syntax-dynamic-import插件,不過它要求同時(shí)安裝@bable/core^7.0.0,如果你安裝了babel-core6,是會(huì)有版本沖突的。我的做法如下
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 } ] })
還有一種魔法注釋用法
有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用 命名 chunk,一個(gè)特殊的注釋語(yǔ)法來提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
3.異步組件
如果組件在頁(yè)面加載時(shí)不需要,只在調(diào)用時(shí)用到,這時(shí)可以使用異步組件的寫法。僅僅是引入和組件注冊(cè)寫法不同
// template <test v-if="showTest"></test> // script components: { test: () => import('./test') // 將組件異步引入,告訴webpack,將該部分代碼分割打包 }, methods:{ clickTest () { this.showTest = !this.showTest } }
4.圖片的壓縮合并
無損壓縮圖片:http://www.dbjr.com.cn/softs/605425.html
如有可能,將圖片制作成精靈圖
5.CDN加速
在index.html中引入cdn資源
... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...
修改 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已經(jīng)使用UglifyJsPlugin 插件來壓縮代碼,可以設(shè)置成如下配置:
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false })
其中sourceMap: false是禁用除錯(cuò)功能。
如果設(shè)為true,在部署包中會(huì)生成.map結(jié)尾的js文件。它用于在代碼混淆壓縮的情況下仍可進(jìn)行調(diào)試。這個(gè)功能雖好,但會(huì)大大增加整體資源包的體積,所以將其禁用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03Delete `,` 如何解決(vue eslint與prettier沖突)
這篇文章主要介紹了Delete `,` 如何解決(vue eslint與prettier沖突)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10useEffect理解React、Vue設(shè)計(jì)理念的不同
這篇文章主要為大家介紹了useEffect理解React、Vue設(shè)計(jì)理念的不同詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式
這篇文章主要介紹了axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法
這篇文章主要介紹了vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理2019-04-04