vue项目优化--使用CDN和Gzip

2024年1月13日 233次阅读 来源: 臧瑟

使用vue-cli构建的vue项目，在打包发布的时候，发现打包后的文件体积很大，使用webpack-bundle-analyzer分析后，发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入，这样就能大大缩小项目文件的体积。

具体实现（以我个人项目为例）
我的项目中引入了以下模块vue vue-router vuex axios moment highlight.js。

引入cdn文件
我使用的是bootcdn
其中moment.js需要额外引入中文语言
highlight.js需要引入自己需要的语言
我的项目中会展示javascript/html/css/bash/markdown (html支持需要引入xml)

//index.html

 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>

删除依赖
这些依赖以前是使用npm安装，现在需要在项目文件注释掉（或直接删除这些依赖），所有用到这些你需要替换的第三方依赖文件的代码都需要删除或注释

eg:
// import Vue from 'vue'
// import VueRouter from 'vue-router'

然后在webpack的配置文件里加入如下代码

  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'moment': 'moment',
    'highlight.js': 'highlight.js'
  }

注意后面的名称是改模块暴露出来的名称，具体不熟悉的可以到引入的js源码里查看。

开启gzip加速
打包时，可以将config/index.js文件的productionGzip设置为true
主要是webpack里compression-webpack-plugin模块的实现。

使用node服务器需要安装 compression模块

express实现
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression({ threshold: 9 }))

nginx实现

  //conf文件里
  server {
        listen       8088;
        server_name  localhost;
        location / {
            gzip on;
            gzip_min_length 1k;
            gzip_buffers 16 64k;
            gzip_http_version 1.1;
            gzip_comp_level 9;
            gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
            gzip_vary on;
            root   /xxx/xxx/xxx;
            index index.html
        }
        }

构建项目，重启服务。
然后就享受页面秒开的算酸爽吧.

    原文作者：臧瑟
    原文地址: https://segmentfault.com/a/1190000013239622
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞