html5首屏加载乐山暴雨,发布前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案...

这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

1、compression-webpack-plugin插件打包.gz文件

安装插件

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

或者

yarn add compression-webpack-plugin --save-dev

vue.config.js配置插件

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const productionGzipExtensions = ['js', 'css']

const isProduction = process.env.NODE_ENV === 'production'

....

configureWebpack: {

plugins: [

// Ignore all locale files of moment.js

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

new UglifyJsPlugin({

uglifyOptions: {

compress: {

drop_debugger: true,

drop_console: true

}

},

sourceMap: false,

parallel: true

}),

// 配置compression-webpack-plugin压缩

new CompressionWebpackPlugin({

algorithm: 'gzip',

test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),

threshold: 10240,

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;

}

}

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

打包后的文件

image.png

Chrome访问

image.png