本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用,
其他就是对接口优化等
一、 vendor.js 优化
由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!
第一步:cdn引入各种包
index.html中cdn的方式引入vue、vuex、axios、iview、等包,如下图:
第二步:在使用vue等包的地方,注释掉import引入
打开main.js文件 注释掉需要排除的依赖import ,并且注释掉 Vue.use
第三步、打包忽视掉vue等包
在webpack.base.conf.js , 把需要从cdn方式引入的依赖,都排除掉,包括 iview vue axios 等等 如下图
最终重新打包 npm run build
可以发现 Vue 的vendor.js文件确实变小了很多,这样在加载首页的时候,浏览器请求它的时候不会过大
可见vendor.js从 1M多已经减少到 400k了
二、Vue开启Gzip压缩
config/index.js 开启productionGzip
将其productionGzip 配置成true
配置Gzip的 插件配置
打开webpack.prod.config.js 配置一下这段代码
代码如下:
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8,
})
)
}
配置打包report 查看详细打包信息
打开package.json ,配置
"report": "npm run build --report=true"
重新打包查看Gzip压缩情况
重新 npm run build 可以看到提供的 gz 压缩包 vendor.js.gz 已经小到了100k左右了, 从刚开始1M已经优化到现在的100k了
开启Nginx Gzip功能
gzip的概念
gzip 是 Web 世界最广泛的文件压缩算法,已经得到了绝大多数的服务端和客户端软件(例如我们使用的浏览器)的支持。gzip 最为擅长的是压缩纯文本文件,其效果非常明显,大约可以减少70%以上的文件大小,所以 Web 项目中开启 gzip 十分必要
nginx gzip如何配合vue使用
事先用Vue生成的 gzip 压缩好文件(.gz)让 nginx 根据请求来自己选择 .gz 文件输出,利用 nginx 中的模块 http_gzip_static_module,不消耗 CPU 资源,nginx配置只需要在上述里面加入一行即可,如下:
gzip_static on;
主要要添加 http_gzip_static_module 模块
nginx 中的模块 http_gzip_static_module 默认是不在的
所以我们要记得在 nginx 里面添加上 http_gzip_static_module 模块,参见:yum安装下的nginx,如何添加模块,和添加第三方模块
安装完http_gzip_static_module模块后,使用 nginx -V 命令查看是否模块加载成功
nginx gzip 详细配置
打开nginx的nginx.conf文件 在server部分配置上gzip的配置
gzip on; 开启或关闭gzip on off
gzip_buffers 32 4k;
gzip_comp_level 5; 压缩等级,字数越大压缩越好,时间也长
gzip_static on; 重要!表示使用已经压缩好的gz文件,根据请求 配合vue生成的gz文件
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
查看是否生效
可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功
总结
本篇主要讲解 Vue项目打包后 vendor.js 文件很大,如何对它进行优化,以及开启Vue的压缩 和 nginx gzip 压缩的使用。
其他就是对接口、图片优化等。实践出真理!!!