網站優化

相信有很多后端的小伙伴，是不太精通前端的，寫前端為了好看的樣式，為了顯示自己的數據，但是我們往往自己手擼的前端會有很大的問題，比如說排版問題，不太好看，網站的響應速度慢等等，這些都是一些常見的問題。網站的響應速度對用戶的體驗來說是比較重要的，在一般的情況下，一個網站的響應速度超過了10s我們都會認為是響應失敗的，一個正常的網站的響應速度在4s左右，這才能讓用戶的體驗良好，那么廢話不多說，接下來我們進入正題，如何優化網站呢？？

網站的響應速度主要分為兩個原因：其一呢：網速的影響，這個是我們無法左右的，要想提高網站的響應速度，我們只有一個辦法，那就是花錢更換服務器，那這個是我們沒法避免的。其二呢：就是因為網站文件大小的原因了，這個我們是可以控制的....

那如何優化網站的大小呢？，主要有以下幾個步驟：

一：對網站中的圖片進行壓縮

隨著數字媒體的不斷發展，照片也越來越高清，隨便的ps一下就會很大，網站中會有一些圖片會大量的拖慢速度，高清的，2k的等等，而我們的網站本就不需要太高清的圖片來進行展示網站優化，所以我們對其壓縮存入，這會大大的減少圖片的大小，從而加快網站的訪問速度：

下面是我常用的圖片壓縮網站：

在線圖片壓縮 - 在線圖片壓縮工具,在線圖片壓縮軟件

通過壓縮就會讓其很小，如下圖所示：

壓縮完成以后存入就會很小。

插件壓縮

當然還可以用插件壓縮，但是我用了好像沒什么效果（這里也寫一些吧>_ {

// 壓縮圖片

: () => {

if () {

// 圖片壓縮處理

const = ..rule('')

.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)

.use('image--')

.('image--')

.({ : true })

.end()

}

}

二：組件的按需引入

我們在做網頁開發的時候呢，會因為方便使用會大量的引入不同的組件，其實這點是不可取的網站優化，但是代碼已經寫好了，在重新的構建，無異于之前的白做，白白浪費了時間，得不償失，但是不優化網站，網站的響應速度遠遠的達不到要求，這是我們就需要把組件按需引入，所謂的按需引入呢，就是把組件中我們用過的標簽文件導入，將沒用過的呢，不導入，從而達到減少網站大小的目的。

首先呢，我們先進行打包分析，用來查看那個組件的文件比較大，從而進行按需引入：

在 .json 中添加命令

`"": "vue-cli- build --"

然后命令行執行 npm run ，就會在dist目錄下生成一個 .html 文件，右鍵瀏覽器中打開即可看到打包分析報告:

通過分析我們可以看出什么組件占用的文件大小比較多,下面呢我就介紹集中常用組件的按需引入：

1、按需引入

1.借助babel--，我們可以只引入需要的組件，以達到減小項目體積的目的:

npm babel-- -D ----用的如果是yarn的話 前面改為 yarn add

2.更改.文件

: [

[

"",

{

: "-ui",

: "theme-chalk",

},

],

3.寫index文件引入我們需要引入的組件并且的暴露出來。

因為我們有的時候，并不是只用一個兩個的，所以需要些文件，如下圖所示：

4.在main.js文件中使用該文件，這樣就大功告成了

1.首先呢，要安裝

npm --save

2.引入核心模塊

{, } from '/';

3.引入所要使用的表的模塊（我這邊只用來柱狀圖，所以就單純的引入了一下柱狀圖）

{ } from "/";

4.引入提示框，標題，直角坐標系組件，組件后綴都為

{

,

,

,

,

,

} from "/";

5.引入 渲染器，注意引入 或者 是必須的一步

{

} from '/';

6.注冊必須的組件

.use(

[

,

,

,

,

,

,

,

]

);

到此按需引入結束（我這個呢是用的柱狀圖，引入其他的請勿找抄）

需要注意的是注意為了保證打包的體積是最小的， 按需引入的時候不再提供任何渲染器，所以需要選擇引入或者作為渲染器。這樣的好處是假如你只需要使用 svg 渲染模式，打包的結果中就不會再包含無需使用的模塊。

iview

這個組件是有些奇怪的，他有兩個網站，安裝的時候需要注意，一個是view-,另一個是iview這兩個是不同的，其中第一個是有鏈表的，下面我們來講解view-按需引入

1.首先需要借助一個工具babel--，我們要先進行安裝

npm babel-- -D ----用的如果是yarn的話 前面改為 yarn add

2.我們要進行的是修改那個.文件

3.main.js中引入核心樣式文件

**** 'iview/dist//iview.css'

注意：此處不需要 iview和Vue.use('iview'),只需要引入樣式即可

4.使用iview的組件中引入或全局注冊

// hello.vue

hello