## 2. webpack3.x優化首屏加載速度
首先要說明一下，首屏加載速度優化針對的是打包后dist文件。我們如果要在本地進行測試的話，需要本地有個服務器，我們在這里使用nginx。
### 2.1 本地安裝nginx
> 下載地址： http://nginx.org/en/download.html
在官網上找到自己系統適合的nginx版本，下載到本地
#### 2.1.1 window安裝
1. 解壓文件
2. 雙擊運行nginx.exe，在任務管理器中出現nginx的進程，則表示安裝成功
#### 2.1.2 mac/linux安裝
```js
#1.解壓文件
tar -xzf nginx-1.14.0.tar.gz #mac可以使用解壓縮工具解壓，不必用命令行
#2. 配置安裝路徑 --prefix指定安裝路徑 假設我要裝到/usr/local/nginx文件夾中
./configure --prefix=/Users/best9/local/nginx
#編譯
make
##安裝
make install
```
安裝完成后進入到`—prefix`指定的文件夾中，執行``ll``,會發現文件夾下有以下目錄
我們要關心就是我上面標出來的三個目錄
進到sbin目錄中，啟動nginx程序
```shell
cd sbin
#需要使用root權限，否則會報錯 報錯信息可以在日志中查看到,錯誤日志目錄 /logs/error.log
sudo ./nginx
```
正常的話，nginx會默認在localhost:80端口啟動，在瀏覽器訪問`localhost`，就會顯示默認界面
如果電腦的80端口被占用的話，在`conf/nginx.conf`文件中修改端口
### 2.2 nginx常用命令
nginx使用-s發送信號操作運行中的進程,常用命令如下：
注意：使用命令需要在`sbin`目錄下
```shell
#啟動nginx
./nginx
#立即停止服務 -s stop
./nginx -s stop
#優雅地停止服務 -s quit
./nginx -s quit
#重啟服務 -s reload
./nginx -s reload
```
### 2.3 nginx配置靜態文件服務器
> 我們在這里使用nginx配置一個最簡單的靜態文件服務器，更復雜的配置稍后再講
nginx的配置文件地址：`conf/nginx.conf`
使用vim或者其他編輯器打開該文件，修改配置文件第43-45行：
`vim conf/nginx.conf`
```js
location / {
alias /Users/best9/github/vue2_template/dist; #訪問/相當于訪問alias配置的目錄
}
```
配置完成后保存，然后重啟服務
`sudo ./sbin/nginx -s reload` 要使用root權限重啟
打開瀏覽器訪問localhost
因為沒有登錄，會自動跳轉到登錄界面
到這里靜態文件服務器就配置好了，但我們刷新下頁面，會報錯404
這是因為我們使用了vue router的history模式，我們需要在nginx中加入以下配置
```nginx
location / {
try_files $uri $uri/ /index.html;
}
```
然后重啟nginx，再刷新頁面就沒問題了
### 2.4 優化首屏加載速度
以上步驟就緒后，我們就可以來優化加載速度了
打開chrome的devTools面板，切換到`Network`，禁用瀏覽器緩存，刷新測試下加載速度，發現整個應用加載大約需要1.97s,如下圖：
把網絡環境切換到`Fast 3G`,再測試一次，發現加載用了7.56s，白屏時間6.89s
我們使用預渲染插件進行優化
#### 2.4.1 預渲染
> 使用插件：prerender-spa-plugin
>
> 參考鏈接：https://juejin.im/post/59d49d976fb9a00a571d651d
首先，安裝 `prerender-spa-plugin`，安裝時件略長，因為其依賴了 `phantomjs`
```
cnpm install prerender-spa-plugin --save-dev
```
我們只在生產環境中進行預渲染，修改` build/webpack.prod.conf.js`，在配置插件的地方加入如下代碼。
```js
//引入 預渲染插件
const PrerenderSpaP=require('prerender-spa-plugin')
//在plugins中配置
new PrerenderSpaP(
// 輸出目錄的絕對路徑
path.join(__dirname,'../dist'),
//預渲染路由
['/home','/login']
)
```
再次執行打包，然后再進行測試：
發現白屏時間為4.10s，在弱網環境下，使用預渲染，大約能縮減2.5秒的白屏時間
##### 預渲染注意事項
* 預渲染的路由不能是動態加載的，否則會報webpackJsonp is not define的錯誤，要想解決這個錯誤，可以看這里 https://juejin.im/entry/5911a487ac502e450284caf8
* 預渲染的路由不能是需要權限才能訪問的頁面。預渲染的機制是在本地跑一個chromium瀏覽器，然后去爬取你預渲染頁面的Html，如果你的頁面需要權限(登錄)才能進入，就爬不到，也不會報錯，最終只會渲染不需要權限的頁面
舉個例子：
插件配置如下：
```js
new PrerenderPlugin({
staticDir:path.join(__dirname,'../dist')
routes:['/','/about','/login']
})
```
路由配置如下：
#### 2.4.2 配置gzip壓縮
> gzip官方文檔 http://nginx.org/en/docs/http/ngx_http_gzip_module.html
nginx默認是關閉gzip的，我們需要自己打開，并進行一些配置：
```nginx
gzip:on; #打開gzip,關閉為off
gzip_min_length 1; #小于gzip_min_length，不進行壓縮(默認單位為byte)
gzip_comp_level 2; #壓縮級別
gzip_types text/plain text/css application/javascript text/javascript image/jpeg image/gif image/png;#指定類型進行gzip壓縮
```
配置完成后，我們再測試一下加載速度：
發現白屏時間為1.95s,加載文件的體積也變小了
