美文网首页
解决Vue打包文件大,首次加载慢的问题

解决Vue打包文件大,首次加载慢的问题

作者: 你是猪吗是吗是吗是吗是吗 | 来源:发表于2018-03-08 16:00 被阅读0次

未压缩前的

压缩后的

那么如何压缩的呢,接着往下看

1.首先在config/index.js里把productionGzip设置为true(以生产环境为例)

2.配置Nginx

找到nginx.config

http {

    gzip on; #开启或关闭gzip on off

    gzip_static on;#是否开启gzip静态资源

    gzip_disable "msie6"; #不使用gzip IE6

    gzip_min_length 100k;  #gzip压缩最小文件大小,超出进行压缩(自行调节)

    gzip_buffers 4 16k; #buffer 不用修改

    gzip_comp_level 3;  #压缩级别:1-10,数字越大压缩的越好,时间也越长

    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;  #        压缩文件类型   

    gzip_vary off;      #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"

}

这里的gzip_static是设置静态压缩用的,具体功能可以自行百度下。

3.重启Nginx,完活。

支持gzip的会有这么一个属性,一目了然

相关文章

  • 解决Vue打包文件大,首次加载慢的问题

    未压缩前的 压缩后的 那么如何压缩的呢,接着往下看 1.首先在config/index.js里把productio...

  • 复习3

    vue路由懒加载 1.vue路由懒加载解决的什么 问题:解决打包后文件过大的问题,从而优化页面加载,提升性能 注意...

  • Vue首屏加载慢的优化方案

    使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案: 步骤一 webpack来打包vue项目,vendo...

  • vue 打包文件体积过大优化

    vue[打包的chunk-vendors.xxx.js文件过大导致加载过慢问题] 因app首页加载不流畅,于是去检...

  • 2020-03-05 为Webpack Vue项目瘦身

    在利用webpack脚手架搭建vue项目后,往往最终打包的.js和.css文件过于庞大,造成首次加载的时候白屏时间...

  • vue 优化加载速度及在组件中引入外部js文件

    解决vue包很大问题,首次加载很慢问题。常见的解决方法有1.cdn 引入 在index页,script标签引入各...

  • vue 懒加载

    懒加载 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大...

  • vue构建项目入口文件index.html缓存引发的白屏问题

    问题   vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。...

  • vue-cli3.x 项目优化

    1.路由懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成...

  • vue首屏加载优化

    1.异步路由加载 2.不打包库文件 spa首屏加载慢,主要是打包后的js文件过大,阻塞加载所致。那么如何减小js的...

网友评论

      本文标题:解决Vue打包文件大,首次加载慢的问题

      本文链接:https://www.haomeiwen.com/subject/qosyfftx.html