uniapp 发布h5前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案
这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。
1、compression-webpack-plugin插件打包.gz文件
安装插件 也可以指定版本 我这里下载的是
1.1.2版本的，试过更高的版本会有ES6语法的报错，因为我node使用的是v12，如果node版本更高可以尝试更高版本
npm install --save-dev compression-webpack-plugin npm install --save-dev compression-webpack-plugin@1.1.2
或者
yarn add compression-webpack-plugin --save-dev
vue.config.js配置插件 如果报为没有webpack就执行npm link webpack
module.exports = {
chainWebpack: config => {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
threshold: 10240, // 超过10kb的文件就压缩
deleteOriginalAssets:true, // 不删除源文件
minRatio: 0.8
})
)
}
}
}2、nginx配置：
gzip config
# gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\.";
完整示例
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
location / {
# 用于配合 browserHistory 使用
try_files $uri $uri/ /index.html;
# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;
}
location /api {
proxy_pass https://preview.pro.loacg.com;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}}server {
# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
listen 443 ssl http2 default_server;
# 证书的公私钥
ssl_certificate /path/to/public.crt;
ssl_certificate_key /path/to/private.key;
location / {
# 用于配合 browserHistory 使用
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass https://preview.pro.loacg.com;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}}附录
配置项释义：
# 开启服务器实时gzip gzip on; # 开启静态gz文件返回 gzip_static on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # 设置压缩所需要的缓冲区大小 gzip_buffers 32 4k; # 设置gzip压缩针对的HTTP协议版本 gzip_http_version 1.0; # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间 gzip_comp_level 7; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\.";
3、示例
打包文件大小信息
DONE Compiled successfully in 43951ms 11:19:06 PM File Size Gzipped dist\js\chunk-vendors.6f36ee27.js 2729.43 KiB 829.53 KiB dist\js\chunk-42ac50f8.3aed1f5b.js 260.22 KiB 62.60 KiB dist\js\app.47d6af3d.js 89.26 KiB 27.35 KiB dist\js\chunk-2f07b9a4.4a3fdd01.js 62.59 KiB 14.08 KiB dist\js\chunk-3cfde34a.24cec922.js 24.67 KiB 7.74 KiB dist\js\chunk-1d171181.fe12f22a.js 24.63 KiB 6.18 KiB dist\js\user.d8960780.js 18.66 KiB 6.47 KiB dist\js\chunk-05182e90.d2ed6c5c.js 16.77 KiB 5.63 KiB dist\js\chunk-3dd96f82.41706c18.js 13.98 KiB 4.04 KiB dist\js\chunk-3085d777.f0a8defc.js 9.91 KiB 2.88 KiB dist\js\chunk-4d8431e9.3b47471d.js 8.94 KiB 3.25 KiB dist\js\chunk-4492074c.9f53a6c6.js 8.37 KiB 3.14 KiB dist\js\chunk-761f0cf1.de4d849b.js 8.15 KiB 2.69 KiB dist\js\chunk-605ac6e0.cb0a2add.js 7.79 KiB 2.28 KiB
打包后的文件
Chrome访问
转自：https://www.jianshu.com/p/957ed8a7ca73
