h5首页加载慢_Vuejs单页应用首页verdor.js大加载慢的问题解决方案之一

Vuejs单页应用首页verdor.js大，并且加载慢，严重的影响用户体验，尤其对于移动端应用来说，做了很多优化，尽可能的去掉了不需要的东西，但是还是加载慢，尝试了一些方法，其中最简单有效的办法就是开启gzip。

操作步骤如下：

配合 vue-cli 的构建工具，开启 config/index.js 中的

productionGzip: true

Vue默认没有安装相应webpack 插件，需要手动安装一下：

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

build 时会看到多打出很多 .gz 的包就ok啦~

但是这个时候gzip不一定有效，所有还需要在nginx配置里配置对js文件的gzip

比较完整的配置如下：

# Enable Gzip compressed.

# http://nginx.org/en/docs/http/ngx_http_gzip_module.html#gzip_http_version

gzip on;

# Compression level (1-9).

#5 is a perfect compromise between size and cpu usage, offering about

#75% reduction for most ascii files (almost identical to level 9).

gzip_comp_level 9;

# Don't compress anything that's already small and unlikely to shrink much

# if at all (the default is 20 bytes, which is bad as that usually leads to

# larger files after gzipping).

gzip_min_length 256;

gzip_disable "msie6";

gzip_buffers 32 4k;

gzip_http_version 1.1;

# https://www.mail-archive.com/search?l=nginx@nginx.org&q=subject:%22Gzip+issue+with+Safari%22&o=newest&f=1 for safira

gzip_static on;

# Compress data even for clients that are connecting to us via proxies,

# identified by the "Via" header (required for CloudFront).

gzip_proxied any;

# Tell proxies to cache both the gzipped and regular version of a resource

# whenever the client's Accept-Encoding capabilities header varies;

# Avoids the issue where a non-gzip capable client (which is extremely rare

# today) would display gibberish if their proxy gave them the gzipped version.

gzip_vary on;

# Compress all output labeled with one of the following MIME-types.

gzip_types

application/atom+xml

# 这个application/x-javascript还是有区别的

application/javascript

application/json

application/ld+json

application/manifest+json

application/rss+xml

application/vnd.geo+json

application/vnd.ms-fontobject

application/x-font-ttf

application/x-web-app-manifest+json

application/xhtml+xml

application/xml

font/opentype

image/bmp

image/svg+xml

image/x-icon

text/cache-manifest

text/css

text/plain

text/vcard

text/vnd.rim.location.xloc

text/vtt

text/x-component

application/octet-stream

text/x-cross-domain-policy;

# text/html is always compressed by HttpGzipModule

具体的案例：北欧优品移动端Vue单页应用Demo：https://www.40hs.com