完美解决 vue webpack 单页面加载慢 gzip 访问 vendor.js 打包文件过大问题

最新推荐文章于 2025-07-02 22:34:58 发布

ChatYu

最新推荐文章于 2025-07-02 22:34:58 发布

阅读量9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript node npm 文章标签： vue webpack 单页面 spa gzip

本文链接：https://blog.youkuaiyun.com/qq_19767623/article/details/83185132

步骤一 vue-cli开启打包压缩和后台配合 gzip访问

1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true

2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

 npm install --save-dev compression-webpack-plugin 
 //(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 
  npm install --save-dev compression-webpack-plugin@1.1.11

3.等安装好了，重新打包 npm run build ，此时打包的文件会新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件。

4.后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

开启 nginx gzip ,在 nginx.conf 配置文件中配置

http {  //在 http中配置如下代码，
  
   gzip on;
   gzip_disable "msie6"; 
   gzip_vary on; 
   gzip_proxied any;
   gzip_comp_level 8; #压缩级别
   gzip_buffers 16 8k;
   #gzip_ht