前言

項(xiàng)目前端優(yōu)化是我們經(jīng)常需要去做的事情，今天我們就來記錄下我的實(shí)際操作。

一、CDN引入

這是一個(gè)常態(tài)化的操作了，主要是讓我們通過npm下載依賴包和import引入的文件，變成線上使用，減少打包后的文件大小。比如常用的vue、ElementUI、vuex、vue-router、axios等等一些常用的

首先在index.html文件引入

    <!-- 引入樣式 -->
    <link rel="stylesheet"  rel="external nofollow" >
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script> 
    <script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>

然后注釋掉import引入的

一定要把Vue.use(ElementUI)注釋

第三步，找到webpack.base.conf.js文件，在下面添加你CDN引入的依賴

vuex的store/store.js文件里面修改

router文件也需要修改

坑：

1.一定要先引入vue的，然后再加其他的，不然會(huì)報(bào)錯(cuò)，找不到elementUI的標(biāo)簽名；

2.不能只引入elementUI，不引入vue，一樣會(huì)報(bào)錯(cuò)；

3.我引入的vue-router的CDN，在抓包的時(shí)候發(fā)現(xiàn)居然要四點(diǎn)多秒種才下載完成，所以我就去掉了，我不知道你們會(huì)不會(huì)，可以先試試。

二、gzip壓縮

首先安裝一個(gè)插件

npm install --save-dev compression-webpack-plugin

然后在config/index.js里面開啟

然后在webpack.prod.conf.js，找到這段代碼

最后就是后端配置的問題

瀏覽器查看請(qǐng)求頭，有下面這些標(biāo)志就是開啟成功了

三、路由懶加載，這種最簡單的了就不多說了

const production = () => import('@/components/view/production/production')
?
{
    name: '123123',
    path: 'production',
    component: production
  },

四、打包不生成map文件

config/index.js
?
productionSourceMap: false,

五、router上面使用props傳參數(shù)，導(dǎo)致頁面加載時(shí)間很長

我在優(yōu)化一個(gè)項(xiàng)目的時(shí)候，里面有一個(gè)單點(diǎn)登陸的功能頁面。這個(gè)需要通過路由傳參數(shù)，但是在首次進(jìn)入頁面的時(shí)候，瀏覽器捉包發(fā)現(xiàn)第一次請(qǐng)求的時(shí)候，打包的css一直被掛載長達(dá)將近20秒。

從發(fā)現(xiàn)這個(gè)問題開始，我一直以為是因?yàn)閏ss文件太多，但是也就四百多kb，但是也對(duì)css文件進(jìn)行各種的優(yōu)化，拆分、減少背景圖片的引入等等，甚至使用了CDN引入了某些css文件，減少到兩百多kb最后還是一樣的問題，就覺得不是這個(gè)問題。

最后我們測試，正常打開登陸頁面然后進(jìn)入頁面，是正常的不會(huì)掛載。但是使用單點(diǎn)登陸就會(huì)掛載，然后就去一個(gè)測試檢測，最后發(fā)現(xiàn)，只要把傳參模式修改了，就正常了！?。。。。。。。。。。。。。。。。。。。。。。。。?！

優(yōu)化前的傳參，使用了props

{
      name: 'Login',
      path: '/Login',
      component: Login,
      props: (route) => ({username: route.query.username})
},

優(yōu)化后的參數(shù)，直接拼在路徑后面

{
      name: 'Login',
      path: '/Login/:username',
      component: Login,
      // props: (route) => ({username: route.query.username})
},

我是真的栓q！

總結(jié)

到此這篇關(guān)于vue項(xiàng)目優(yōu)化的文章就介紹到這了,更多相關(guān)vue項(xiàng)目優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論