vue打包优化

Posted 2020-12-29 taoland

网站首页第一次加载很慢，优化过后从十多二十秒缩短到了几秒，主要是打包的时候按需加载了，然后使用了gzip压缩。

• 这是优化之前的
  

• 发现vendor特别大，所有引用的第三方库都会打到这个包里面;另外就是之前打包没有做懒加载处理，所有组件都会打包进app.js；
  

• 优化主要考虑3方面
  • 分包

    • 修改router
      ```js
      //这是以前的引入方式
      import CommonLayout from ‘@/components/commonLayout‘
      import Home from ‘@/pages/home‘
      import Archives from ‘@/pages/archives‘

      //现在按需加载
      const CommonLayout = r => require.ensure([], () => r(require(‘@/components/commonLayout‘)), ‘chunkname1‘)
      const Home = r => require.ensure([], () => r(require(‘@/pages/home‘)), ‘chunkname2‘)
      const Archives = r => require.ensure([], () => r(require(‘@/pages/archives‘)), ‘chunkname3‘)
      ```
    • 这样修改之后，app.js会被分割为3个js文件，对应的router加载对应的js，缓解首屏渲染速度
  • 第三方库采用cdn的方式引入，可以参考webpack外部扩展，这样三方库就不会打包进vendor。
  • 压缩vendor

    • config-index中开启gzip压缩
      

    • 打包后发现xx.js都变成了xx.js.gz，大小也都变小了
    • 上传服务器后，发现js的Gzip压缩没有用，这里需要设置apache
    • vim /etc/httpd/conf/httpd.conf
    • 添加

    <IfModule mod_deflate.c>
    # 压缩等级 9
    DeflateCompressionLevel 9
    # 压缩类型 html、xml、php、css、js
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
    AddOutputFilter DEFLATE js css
    </IfModule>

    • 重启apache

• 最后发现加载速度大大提高
  

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand