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