## 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,加载文件的体积也变小了
