欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐詳解

 更新時(shí)間:2019年02月17日 17:32:30   作者:藺相如如  
這篇文章主要介紹了記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

項(xiàng)目現(xiàn)狀

項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測(cè)平臺(tái),引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化;打包后,體積高達(dá)2.1M,這個(gè)體積相比于我的項(xiàng)目規(guī)模來說就顯得稍有笨重了

使用webpack-bundle-analyzer分析了一下各個(gè)文件所占用的比例:

整個(gè)項(xiàng)目文件分布大體清晰了,現(xiàn)在開始優(yōu)化走起!

優(yōu)化思路

根據(jù) wba的顯示,第三方插件是大部頭,包括three.js echart組件elementUI組件。
three.js優(yōu)化空間不大,主要關(guān)注另外兩個(gè)上面。

echarts

根據(jù)我的項(xiàng)目需求,echart主要用到的是linechart,其他圖表不需要。而在開發(fā)過程中,我把整個(gè)echart都引用進(jìn)來,其實(shí)是很沒有必要的。

ehcart整體引用方式

import echarts from ("echarts")
vue.prototype.$echarts = echarts

更改為:

import echarts from "echarts/lib/echarts.js"

import "echarts/lib/chart/line"
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import "echarts/lib/component/dataZoom"

Vue.prototype.$echarts = echarts

elementUI

同理echart,elementUI同樣按需求導(dǎo)入,替換之前的整體引入。
elementUI按需引入需要安裝 babel-plugin-component包,在babelrc文件中進(jìn)行如下修改:

"plugins": [
    ...
    ["component",
    {
     "libraryName": "element-ui",
     "styleLibraryName": "theme-chalk"
    }]
   ]

優(yōu)化后:

經(jīng)過對(duì)第三方插件的優(yōu)化,打包后的文件縮小了近30%。

目前為止,項(xiàng)目打包后的大部頭就是three.js,這個(gè)目前的優(yōu)化空間較小。
而對(duì)echart改造給打包體積上帶來的收益還是很明顯的。

后記

這次的優(yōu)化比較簡(jiǎn)單,主要是通過對(duì)自己項(xiàng)目的優(yōu)化,熟悉webpack-bundle-analyzer的操作和使用這個(gè)插件的來優(yōu)化webpack打包文件的方法和思路;算是簡(jiǎn)單的練手記錄一下吧。當(dāng)然,從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多,這個(gè)文章繼續(xù)更新下去。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue2配置scss的方法步驟

    vue2配置scss的方法步驟

    這篇文章主要介紹了vue2配置scss的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • vue 動(dòng)態(tài)給每個(gè)頁面添加title、關(guān)鍵詞和描述的方法

    vue 動(dòng)態(tài)給每個(gè)頁面添加title、關(guān)鍵詞和描述的方法

    這篇文章主要介紹了vue 動(dòng)態(tài)給每個(gè)頁面添加title、關(guān)鍵詞和描述的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08
  • 深入了解Vue中雙向數(shù)據(jù)綁定原理

    深入了解Vue中雙向數(shù)據(jù)綁定原理

    vue是一個(gè)mvvm框架,即數(shù)據(jù)雙向綁定,即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,視圖也就發(fā)生變化,當(dāng)視圖發(fā)生變化的時(shí)候,數(shù)據(jù)也會(huì)跟著同步變化。本文將通過示例詳解其中原理,需要的可以參考一下
    2022-05-05
  • vue.js input框之間賦值方法

    vue.js input框之間賦值方法

    今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 淺談webpack編譯vue項(xiàng)目生成的代碼探索

    淺談webpack編譯vue項(xiàng)目生成的代碼探索

    本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue 基礎(chǔ)語法之計(jì)算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解

    Vue 基礎(chǔ)語法之計(jì)算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解

    計(jì)算屬性就是 Vue 實(shí)例選項(xiàng)中的 computed,computed 的值是一個(gè)對(duì)象類型,對(duì)象中的屬性值為函數(shù),而且這個(gè)函數(shù)沒辦法接收參數(shù),這篇文章主要介紹了Vue 基礎(chǔ)語法之計(jì)算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下
    2022-11-11
  • 詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑

    詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑

    這篇文章主要介紹了詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue項(xiàng)目中禁用瀏覽器緩存配置案例

    vue項(xiàng)目中禁用瀏覽器緩存配置案例

    這篇文章主要介紹了vue項(xiàng)目中禁用瀏覽器緩存配置案例,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題

    Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題

    這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue3中Hooks封裝的技巧詳解

    Vue3中Hooks封裝的技巧詳解

    這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠?yàn)榇蠹以?nbsp;Vue 3 項(xiàng)目中更好地利用 Hooks 提供一些思路和實(shí)踐經(jīng)驗(yàn)
    2023-12-12

最新評(píng)論