Vue項目優(yōu)化

NervosNetwork 發(fā)布于2019-08-26 10:48 / 1035人閱讀

摘要：，組件按需加載這也是可以優(yōu)化的點。如果大家還有好的優(yōu)化方案，歡迎大家留言交流

在日常的Vue項目開發(fā)中，隨著業(yè)務的日漸復雜，代碼量的日益增加，隨之帶來的問題就是打包后的vendor.js體積過大，導致加載時空白頁時間過長，給用戶的體驗太差。為此我們需要減少vendor.js的體積，從本質(zhì)上來解決這種問題。

這里大概例舉幾個在項目中實際用到過的方法，優(yōu)化后的js大概縮小了50%左右，效果還是挺明顯的。

1，webpack externals

為什么要配置externals

官方解釋：webpack 中的 externals 配置提供了不從 bundle 中引用依賴的方式。解決的是，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer environment)中的依賴。

比如我們會在項目中引用各種第三方的js文件，如 jquery，vue，axios 等，如果我們在打包時排除這些依賴，則可以大大減小文件的大小，提高頁面加載速度，配置方法如下：

// 在 index.js 中引入資源




module.exports = {
     ...
     output: {
       ...
     },
     externals : {
       jquery: "jQuery"
       "vue": "Vue",
     }
     ...
   }

這樣就剝離了那些不需要改動的依賴模塊，換句話，下面展示的代碼還可以正常運行：

import $ from "jquery";
import Vue from "vue"

這樣不僅之前對第三方庫的用法方式不變，還把第三方庫剝離出webpack的打包中，從而加速webpack的打包速度。

2，組件按需加載

這也是可以優(yōu)化的點。如果頻繁使用了第三方組件/UI庫，如我的項目中經(jīng)常使用了 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"

[Dialog, Loading].forEach((comp) => {
    Vue.use(comp);
})

3，路由懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

方法一

const login = () => import("@/components/login")
const router = new VueRouter({
  routes: [
    { path: "/login", component: login }
  ]
})

注意：這個時候我們需要安裝 babel-plugin-syntax-dynamic-import 插件，這樣打包時才會識別該語法

方法二

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

const Foo = () => import(/* webpackChunkName: "group-foo" */ "./Foo.vue")
const Bar = () => import(/* webpackChunkName: "group-foo" */ "./Bar.vue")
const Baz = () => import(/* webpackChunkName: "group-foo" */ "./Baz.vue")

4，數(shù)據(jù)緩存——keep-alive

VUE2.0中提供了一個keep-alive方法，可以用來緩存組件，避免多次加載相應的組件，減少性能的消耗。

舉例：用戶瀏覽A頁面，待A頁面的資源都加載完畢了，用戶通過路由跳轉(zhuǎn)到了B頁面，之后又退回到了A頁面，如果沒有特殊處理的話，A頁面的資源會重新加載一遍，造成資源浪費；若我們做了緩存，則可以減少請求的次數(shù)，極高用戶體驗。

1，緩存部分頁面


    



// router 設置如下
routers:[
    {? ?path: "/home",
        name: home,
        meta: {keepAlive: true}? ? ? //? 設置為true表示需要緩存，不設置或者false表示不需要緩存? ? ? ? ? ? ? 
    }
]

2，緩存組件



  


// include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數(shù)組來表示

除了以上的優(yōu)化方法外，還有常規(guī)的圖片的壓縮合并、CDN加速、壓縮代碼等方法，大家應該都很熟悉了，這里就不在一一闡述了。如果大家還有好的優(yōu)化方案，歡迎大家留言交流~

GPU云服務器云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106809.html

vue首屏加載優(yōu)化

摘要：為了讓事情更簡單，允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結果緩存起來，用于后面的再次渲染。庫使用情況 vue vue-router axios muse-ui material-icons vue-baidu-map 未優(yōu)化前首先我們在正常情況下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 評論0 收藏0
記一次Vue項目優(yōu)化及思路

摘要：記錄一個前端項目優(yōu)化的路程，效果如上圖。第二步優(yōu)化結果再次運行查看項目打包情況可以看到項目體積已經(jīng)優(yōu)化到，中也看不到的蹤影了。本文主要想提供一些優(yōu)化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優(yōu)化的路程，效果如上圖。接下來我...

keithxiaoy 2019-08-02 16:12 評論0 收藏0
記一次Vue項目優(yōu)化及思路

摘要：記錄一個前端項目優(yōu)化的路程，效果如上圖。第二步優(yōu)化結果再次運行查看項目打包情況可以看到項目體積已經(jīng)優(yōu)化到，中也看不到的蹤影了。本文主要想提供一些優(yōu)化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優(yōu)化的路程，效果如上圖。接下來我...

nanchen2251 2019-08-23 16:49 評論0 收藏0
記一次vue-webpack項目優(yōu)化實踐【更新】

摘要：優(yōu)化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優(yōu)化空間較小。當然，從整體優(yōu)化的大維度上來說優(yōu)化的點還有很多，這個文章繼續(xù)更新下去。項目現(xiàn)狀項目是一個數(shù)據(jù)監(jiān)測平臺，引入了ehcart和three.js 負責項目的數(shù)據(jù)可視化；打包后，體積高達2.1M，這個體積相比于我的項目規(guī)模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
前端最實用書簽(持續(xù)更新)

摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0