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

 

暂无评论

发表评论