vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案

 ———————————————— 
版权声明：本文为CSDN博主「攻城狮YanGo」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn/weixin_39644462/article/details/90904633

 

对于初学者接触vue项目的时候，一些小项目可能没注意到这一点。对于中大型的项目，打包出来的app.js都有好几M了，导致首次加载的时候非常缓慢，我因为公司需求而急于接收的vue的项目就遇到这个问题，搜索了很多童鞋的方案，大家都比较推荐gzip静态资源压缩，这个需要结合服务器端的配置。
 

 

首先打开/config/index.js文件

 

但是先别急于动手安装，因为 npm install --save-dev compression-webpack-plugin 安装后会报错，很多同鞋都有提到过的，可能是高版本的问题，所以需要在后面指定版本安装（下面是1.1.12版本）的。

npm install --save-dev compression-webpack-plugin@1.1.12

 

 

然后打开/build/webpack.base.config.js文件，找到module.exports的module中的rules

为什么要改这里呢？

因为vue中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。

 

 

 

服务器端(下面以Nginx为例)

打开配置文件

一般都会默认开启gzip的，但是gzip_static 是没有开启的，所有需要加上 gzip_static on;

如果没有开启gzip的话可以在手动在http{}里添加

http {
    gzip on;
    gzip_static on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript         
    text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
}