vlambda博客
学习文章列表

一、路由（组件）懒加载

刚开始使用路由的方式可能如下图，这样会导致用户首次访问页面会把所有的路由资源都加载过来，如果项目大路由多，用户等待的时间就会越长，导致用户体验不好（下图6行的screen改成BigScreen）

由此，我们需要把路由分模块，实现路由的异步加载，如图：

这时候，打包会发现app.js变小了，且生成很多0.xxx.js、1.xxx.js等

二、开源的第三方包，尽量使用cdn加速服务

这样会更加直观的减小app.js文件的大小；

三、服务器开启gzip加载

上边的方法都试了，app.js还是有9.36M,再加上其他的资源，发布测试环境后，加载时间由原来的26s变成了14.25s（如下图），对用户来说，还是相当的慢，后来通过‘面向百度的开发’方式，又学到了一招：开启gizp压缩；gizp压缩是一种http请求优化的方式，通过减少文件体积来提高加载速度。可以减小60%以上的体积，用来减小网络传输的流量大小。

具体方法：前端配置gzip压缩，并且服务端使用nginx开启gzip；

① 前端：

1. 安装插件（看好对应的版本）：npm i -D compression-webpack-plugin

 b. 在文件vue.config.js配置：

c.配置好后，就可以运行打包：npm run build，会发现包中多了.gz格式；

②服务器端需要配置nginx

这时，你可能会发现nginx运行报错了：nginx: [emerg] unknown directive “gzip_static“ in;

此时可用在nginx的安装目录的sbin中使用./nginx -V查看当前nginx的配置信息，看有没有配置--with-http_gzip_static_module;若没有，我们就需要配置并重新安装：

// 配置

./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

// 重新安装

make && make install

③最后，上传前端dist包，重启nginx服务；

访问页面，发现app.js由9.36M变成了1.71M，加载速度由十几秒变成了三秒多；