4.26 针对webpack打包 简单优化

再图片懒加载 以及 路由懒加载实现后(对主路由设置webpackChunkName即可)
ps:花了一上午,和老师的网站进行对比,始终发觉不对劲,我的网站,首先访问速度较慢,其次,对比network。我发现如下:
1、多出了好多storeGroup文件。
2、文件大小普遍比老师的文件大3-5倍。

针对问题一:
因为路由懒加载,我对每个二级路由都加上了webpackChunkName,经检测只需要加载主路由即可,原理先不论。(先以快速成型为主)

针对问题二:
引发了很多问题,那就是npm run build的问题了
似乎vue-cli 3.0自带 gzip的功能(没仔细注意,也可以继续配置)
先说配置webpack,
1、需要安装依赖compress-webpack-plugin
2、配置vue.config.js ,在module.exports下内
4.26 针对webpack打包 简单优化_第1张图片
4.26 针对webpack打包 简单优化_第2张图片
3、 npm run build 即可
4.26 针对webpack打包 简单优化_第3张图片
4、对nginx进行配置,我是在CentOS6.9版本下。
首先如果nginx没有相关的配置,需要进行编译
./configure --with-http_gzip_static_module
再make && make install
打开nginx的conf配置文件(vim cd /usr/local/nginx/conf/nginx.conf)
4.26 针对webpack打包 简单优化_第4张图片
5、nginx -s reload 重启服务
好了,图书优化,暂先到此结束了。
还留了一节git同步部署CentOS项目的操作,留着以后看。
最后,非常感谢Sam老师。虽然我买的是盗版的视频,如果说,在我求职之路上,因为您的知识的传授,使我的就业路变得平坦通畅了。那么待我挣得第一笔薪资,我一定私发您您该得的收益。再次谢谢您。
Respect and Honor!

你可能感兴趣的:(4.26 针对webpack打包 简单优化)