Vue使用CDN以及Gzip压缩整合

作者: 时不我与_ | 来源:发表于2020-07-08 11:22 被阅读0次

Vue使用CDN以及Gzip压缩整合
Vue-Cli 2.0 和Vue-Cli 3.0 CDN和Gzi
vue-cli3 之vue.config.js配置
Java使用GZIP进行压缩和解压缩（GZIPOutputStr
Vue性能优化
4、Linux压缩命令
vue项目中webpack缩小包体积的几种方法
linux压缩和解压缩命令
linux中常见的压缩命令
[性能优化]HTTP篇

最近在用VueCli4版本写自己的网站，想要重新复习一下之前的知识内容，顺带给我自己已经放了两年都没怎么用的服务器放一下自己的网站。但是我发现，在进行项目打包后，vendors文件还是比较大，导致在我小小服务器上面首屏显示会特别的慢。

于是我开始着手进行项目的优化，首先的话就是想到了CDN引入。在VueCli3以上的版本配置的话都是需要新建一个vue.config.js的，然后在内部进行具体内容的实现。

module.exports = {
configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'axios': 'axios',
      'vuex': 'Vuex',
      'moment':'moment',
      'highlight':'highlight'
    },
  }
}

在这里我用CDN引入了Vue、Vue-router、element-ui、axios、Vuex、moment、highlight（该插件为富文本高亮插件，我用的vue-quill-editor富文本编辑器，但是不知道如何CDN引入也没有找到CDN，有知道的大佬希望指教一下。）
配置过vue.config.js之后还需要在public中的index中，使用CDN引入对应的JS文件以及CSS文件。（此处部分内容依赖VueJS所以需要先引入Vuejs）

//index.html
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.1/styles/monokai.min.css" rel="stylesheet">
 .......
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/locale/zh-cn.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

在引入CDN之后，我们还需要在main.js中使用这些CDN

const Vue = require('vue')
//语法高亮
const hljs = require('highlight.js')
// 懒加载
const VueLazyLoad = require('vue-lazyload')
// 时间函数
const moment = require('moment')
Vue.use(axios)
Vue.use(VueAxios)
Vue.use(VueLazyLoad,{
  loading:'/loading-svg/loading-bars.svg'
})

感觉没有什么两样，在最开始，我在查询相关资料的时候，有人说也可以使用以下的方式来进行引用，无需进行require

/* global Vue */ 
以该方式进行引入，这样的方式可以省去require的过程。
目前萌新的我还是有待探索，有知道的大佬希望可以赐教，感激感激感激！

这样的话我们就可以进行build了，我用的yarn所以是yarn build。在打包的时候可以使用一个参数 --report 该参数可以生成一个html文件，让打包的用户看到自己在打包过程中，哪些资源占用情况。具体如下图所示。

build
除此打包以外，还有就是刚才说到的--report的一个使用会生成report的html文件，具体占用如下图所示，希望大佬指正，感谢感谢感谢。

report
可以看到图片，其实是已经没有Vue、Vue-router、以及element-ui这些内容了，只有就是我目前不清楚具体如何优化的quilljs以及highlight。放在我的服务器上还是会很慢很慢，于是我注意到了我打包的时候右方显示的Gzipped，它的大小是正常情况下的四分之一了应该。
说做就做，于是查看相关gzip的信息。（可是我刚才看到那个贴子之后发现也查不到了，如果原作者看到贴的代码出自您的话可以联系我给地址贴上去。抱歉抱歉）

plugins: [
      new CompressionWebpackPlugin({
          filename: '[path].gzip[query]',   // 提示compression-webpack-plugin@2.0.0的话filename改为asset
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, //内容超过10KB进行压缩
          minRatio: 0.8
      })
    ],

同样都是放在configureWebpack下的。配置如上所示。有需要的大佬们可以看一下，有错误希望指正，感谢！

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.12ccee18.js (855 KiB)
  js/chunk-vendors.12ccee18.js.gzip (283 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB)
. This can impact web performance.
Entrypoints:
  app (867 KiB)
      js/chunk-vendors.12ccee18.js
      css/app.1882e4d6.css
      js/app.93e052ca.js

在打包过程中也可能会出现如下的情况，所以可以再添加如下的配置便可以解决该问题。

performance:{
        hints:'warning',
            //入口起点的最大体积
            maxEntrypointSize: 50000000,
            //生成文件的最大体积
            maxAssetSize: 30000000,
    }

这样我们配置完成了Vue的Gzip压缩，我们尝试压缩一下看一下。

gzip
如图所示，Gzip压缩后的内容确实会比原来的内容小很多，这样的话也从侧面提升了首页渲染以及加载的性能。我们接下来放入服务器中。

request
起初只是在request中看到了gzip，但是response还是看不到，所以需要配置nginx的gzip压缩，如下所示。

    gzip  on;
    gzip_min_length 1k;
    gzip_comp_level 5;
    #   # 进行压缩的文件类型。;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;     
    #是否在http header中添加Vary: Accept-Encodin;
    gzip_vary on;
    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区;
    gzip_buffers 2 4k;

配置完成之后进入nginx的sbin目录，进行./nginx -reload 重启。
重启之后我们再次尝试打开网页看一下。

yes!
成功啦，这次的是response返回的内容，并且以往需要7s时间加载的文件，本次只需要2s就加载完成了（虽然还是很慢很痛苦，如果有大佬有更好的方法，感谢感谢赐教。）

vendors

以上就是本次CDN优化以及Gzip压缩的具体内容了，希望对观看的各位有所帮助。