成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

ernest.wang / 1632人閱讀

摘要：優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止，項(xiàng)目打包后的大部頭就是，這個(gè)目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來(lái)說(shuō)優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。

項(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ī)模來(lái)說(shuō)就顯得稍有笨重了

使用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ā)過(guò)程中，我把整個(gè)echart都引用進(jìn)來(lái)，其實(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)過(guò)對(duì)第三方插件的優(yōu)化，打包后的文件縮小了近30%。

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

路由懶加載

項(xiàng)目初期，我們往往在在首次加載的時(shí)候?qū)⑺械穆酚扇考虞d，導(dǎo)致webpack將所有的模塊組件打包在一起，造成vendor文件過(guò)大；現(xiàn)在使用路由懶加載，方式如下：

const loadPage = (page) => 
// vue-loader version 13 
    import (`@/templates/${page}`).then(m => m.default)     

const routers =[ {
  path: "/",
  redirect:"/index",
  component:loadPage("console")
}]

如果你的vue-loader版本是13.X需要使用上面的引用方法
12版本以下：

 import (`@/templates/${page}`)

懶加載后，打出來(lái)的包整體大小還是1.5M，而vendor.js體積已經(jīng)比最開始減少一半了。
因?yàn)榻M件分離打包，所以在某一個(gè)組件里引用的three這個(gè)包也和總包分離了；現(xiàn)在用webpack-bundle-analyzer分析出來(lái)的圖已經(jīng)很好看了。

后記

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101711.html

相關(guān)文章

  • 記一次“失利后”經(jīng)過(guò)半年準(zhǔn)備通過(guò)阿里社招的經(jīng)歷與感悟

    摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過(guò)分析自己的定位與實(shí)際情況，做出的未來(lái)一到兩年的規(guī)劃。在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請(qǐng)，基本上是阿里的但是我知道我菜。。 寫在最前 本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過(guò)分析自己的定位與實(shí)際情況，做出的未來(lái)一到兩年的規(guī)劃。以及本次社招...

    malakashi 評(píng)論0 收藏0

  • 記一次基于vue的spa多頁(yè)簽實(shí)踐經(jīng)驗(yàn)

    摘要：然后類似一樣我的命名是可以在頁(yè)面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉(cāng)庫(kù)上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁(yè),具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁(yè)簽,并且可以通過(guò)瀏...

    ispring 評(píng)論0 收藏0

  • 記一次基于vue的spa多頁(yè)簽實(shí)踐經(jīng)驗(yàn)

    摘要：然后類似一樣我的命名是可以在頁(yè)面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉(cāng)庫(kù)上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁(yè),具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁(yè)簽,并且可以通過(guò)瀏...

    張遷 評(píng)論0 收藏0

  • 記一次 webpack 打包體積優(yōu)化

    摘要：手頭做的項(xiàng)目開發(fā)得差不多了，而打包配置是一開始粗略配置的，不大的項(xiàng)目打包出來(lái)得，所以現(xiàn)在必須進(jìn)行優(yōu)化。用于生產(chǎn)環(huán)境的打包，設(shè)置其為后，這些庫(kù)會(huì)提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結(jié)果的體積開銷主要就是以上幾項(xiàng)。 手頭做的項(xiàng)目開發(fā)得差不多了，而打包配置是一開始粗略配置的，不大的項(xiàng)目打包出來(lái)得6MB+，所以現(xiàn)在必須進(jìn)行優(yōu)化。 打包結(jié)果分析 執(zhí)行命令 webpack ...

    tomlingtm 評(píng)論0 收藏0

  • 【webpack】: 記一次jsbundle體積優(yōu)化

    摘要：背景最近接到一個(gè)任務(wù)是幫忙優(yōu)化的體積，項(xiàng)目是用開發(fā)，多入口。這就涉及到兩次打，那這兩次打的如何打通呢的方式配合使用。通過(guò)可以將掛載到已經(jīng)存在的某個(gè)變量上。通過(guò)其它一些變量的方式暴露出去。不同的配置可以將你的庫(kù)打成一個(gè)庫(kù)，庫(kù)甚至是一個(gè)庫(kù)。 背景 最近接到一個(gè)任務(wù)是幫忙優(yōu)化jsbundle的體積，項(xiàng)目是用ts開發(fā)，多入口。在分析之后發(fā)現(xiàn)每個(gè)bundle都打了同一份代碼(這份代碼是其它組提供...

    Fundebug 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<