摘要:開發(fā)完了,并部署到服務(wù)器后,就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網(wǎng)上壓縮一下經(jīng)過上述的幾步,首頁的加載速度已經(jīng)比較快了,項目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。
本次開發(fā)的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項目開發(fā)當中,添加了自己寫的UI組件,和復雜的業(yè)務(wù)邏輯。整個項目包括10幾個模塊,算比較大的項目了。開發(fā)完了,build并部署到nginx服務(wù)器后,就遇到了一個非常明顯的問題。那就是首頁(登錄頁面)加載太慢,從開始加載到登錄頁面最終呈現(xiàn)出來,用了30多秒(其實也有原因是公司的網(wǎng)絡(luò)不好!),連項目經(jīng)理都找來了,說:“為什么那么長的時間頁面才出來,我們的項目還要部署到公網(wǎng)上去,讓客戶如何訪問?”。自知理虧,于是趕緊開始研究首頁加載滿的問題。
通過chrome的timeline查看了一下,主要是vendor.js比較大,有1.8M之多,還有的圖片比較大,比如登錄的整個背景圖片,有800K。按照如下的方法開始和瀏覽器間的速度之爭。因為對nginx比較了解,所以先從nginx入手。
使用nginx的gzip壓縮,需要使用gzip_static模塊。在sbin下運行nginx -V查看是否開啟了這個模塊。開啟gzip_static模塊后,nginx會自動查找文件中有沒有.gz的文件。
在nginx的conf文件中增加如下的代碼:
gzip on; gzip_static on; gzip_disable "msie6"; gzip_min_length 100k; gzip_buffers 4 16k; gzip_comp_level 3; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off;
在vue的webpack config/index.js中修改
productionGzip: true
vue默認沒有安裝相應(yīng)的插件,運行如下的安裝命令:
npm install --save-dev compression-webpack-plugin
再次重新build后,就會發(fā)現(xiàn)很多.gz的文件。而vendor.js從1.8M直接壓縮到800多K。加載速度也縮短到10秒之內(nèi)。感覺很有成就感啊。繼續(xù)開始下面的優(yōu)化之旅。
2、使用CDN來加載將比較大的文件,如vue、vue-router、vuex、axio用cdn中的文件代替,而不是直接打包到vendor中。
(1)在index.html中引入js文件
(2)去掉這些第三方j(luò)s的import
(3)把第三方的js文件從打包文件中去掉
寫在webpack的externals里面
module.exports = { ... externals:{ "vue": "Vue", ... } }3、使用vue-router的懶加載
我們使用的方法是:
const User = r => require.ensure([], () => r(require("@/pages/user/user.vue")), "chunkname4")4、實現(xiàn)elment-ui和echarts的按需加載
本項目雖然有很多的組件是自己寫的。但還是用了少數(shù)的幾個element-ui組件。而echarts只用到了折線圖和環(huán)形圖。所以可以利用按需加載來進一步縮小文件的體積。
(1)element ui 的按需加載:
安裝babel-plugin-component
npm install babel-plugin-component - D
修改.babelrc
{ "presets": [ ["env", { "modules": false }], "es2015","stage-2" ], "plugins": ["transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]],
在main.js中按需引入
import { Menu, MenuItem,InputNumber,DatePicker,Popover,Badge,Select,Option } from "element-ui"; import "element-ui/lib/theme-chalk/index.css"
(2)echarts的按需引入
安裝 babel-plugin-equire
npm i babel-plugin-equire -D
在.babelrc中添加該插件
"plugins": [ .... "equire"],
創(chuàng)建了一個公用的文件initEcharts.js
const echarts = equire([ "line", "lines", "pie", "bar", "tooltip", "title" ]) export default echarts
在需要使用echarts的地方引入該文件。
5、圖片的壓縮美工最初交給前端的圖是png格式的,比較大。因此直接聯(lián)系美工修改為jpg格式,圖的大小馬上減少很多。另外圖片還可以去下面這個網(wǎng)上壓縮一下:https://tinypng.com/
經(jīng)過上述的幾步,首頁的加載速度已經(jīng)比較快了,項目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94127.html
摘要:如果有什么可以幫到你的無論是不是此項目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點子,我會第一時間去修正。 前言 本項目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個移動端、PC端輕社區(qū)項目 項目地址GitHub 項目更新歷史 開發(fā)環(huán)境 Macos + Vs code + Chrome 項目的靈感最初來源:由于我是一個宅男在...
摘要:如果有什么可以幫到你的無論是不是此項目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點子,我會第一時間去修正。 前言 本項目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個移動端、PC端輕社區(qū)項目 項目地址GitHub 項目更新歷史 開發(fā)環(huán)境 Macos + Vs code + Chrome 項目的靈感最初來源:由于我是一個宅男在...
摘要:問題背景最近做的一個項目需要引入一個外部的第三方腳本。什么情況可以用我以上思路引入的第三方腳本較大,加載所需時間較長頁面按需加載,整個項目只有其中某幾個頁面需要用到引入的第三方腳本第三方腳本沒加載完就渲染頁面導致的頁面報錯 問題背景 最近做的一個項目需要引入一個外部的第三方j(luò)s腳本。由于這是一個關(guān)于渲染3D建筑的腳本,所以體積比較大,大概有2M,加載完成也得要個好幾秒,網(wǎng)速慢的時候十幾...
摘要:注此項目純屬個人瞎搞,正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實現(xiàn),下單功能完全采用官網(wǎng)真實數(shù)據(jù),可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機號碼,下單后可以在手機中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時間,奈何公司的技術(shù)棧是以react為主,沒有機會好好利用vue2去做一個完整的項目。雖然寫了幾個demo,但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...
閱讀 2613·2021-11-02 14:39
閱讀 4338·2021-10-11 10:58
閱讀 1465·2021-09-06 15:12
閱讀 1850·2021-09-01 10:49
閱讀 1334·2019-08-29 18:31
閱讀 1889·2019-08-29 16:10
閱讀 3343·2019-08-28 18:21
閱讀 876·2019-08-26 10:42