前言

问题: vue 线上打开首页速度太慢，js文件太大，且全部走当前服务器获取 js/css 数据，服务器带宽也跟不上

处理方式： 把一些 js/ css 使用 cdn 的方式进行加载

优化后使用 cdn 地址加载，浏览器可以快速拉取到数据

优化效果 ： 优化前 15-20 秒完成加载， 优化后 2秒内完成加载

1、main.js

1、配置排除依赖
2、配置cdn地址
3、关闭打包生成 map.js 文件

定义配置信息

// 是否是生产环境
const isProduction = process.env.NODE_ENV !== 'development';
// 是否需要使用cdn
const isNeedCdn = true
// cdn 加速文件
const assetsCDN = {
  /**
   * externals对象的属性名为package.json中，对应的库的名称（固定写法）,属性值为引入时你自定义的名称
   */
  externals: {
    'vue': 'Vue',
    'axios': 'axios',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter',
    '@smallwei/avue': 'AVUE',
  },
  css: [
    'https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.min.css',
    //'https://cdn.jsdelivr.net/npm/@smallwei/avue@2.9.4/lib/index.css',
    'https://unpkg.com/@smallwei/avue@2.9.4/lib/index.css',
  ],
  js: [
    'https://cdn.staticfile.org/vue/2.6.14/vue.min.js',
    'https://cdn.staticfile.org/element-ui/2.15.9/index.min.js',
    'https://cdn.staticfile.org/axios/0.27.2/axios.min.js',
    'https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js',
    //'https://cdn.jsdelivr.net/npm/@smallwei/avue@2.9.4/lib/avue.min.js' //慢
    'https://unpkg.com/@smallwei/avue@2.9.4/lib/avue.min.js'

  ]
}

加入配置
externals = 排除
cdn 信息注入到配置中

module.exports = defineConfig({

 // 首页访问优化: 关闭生成的map.js 文件  https://blog.csdn.net/z591102/article/details/108076212
  productionSourceMap: false,
  /**
   * 首页访问优化: 排除依赖使用cdn方式引入
   * 参考： https://blog.csdn.net/weixin_43919509/article/details/124149728
   * @param config
   */
  configureWebpack: {
    // 生产环境，则添加不参与打包的包名和依赖包的名称
    externals: (isProduction || isNeedCdn) ? assetsCDN.externals : {}
  },
  chainWebpack: config => {
    // 生产环境或需要cdn时，才注入cdn
    if (isProduction || isNeedCdn) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  },


});

2、public/index.html

读取 main.js 注入的配置

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>

    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

3、效果查看

1、首页会写入 css/js 文件

2、打包后的 js 文件大小会下降

前

后 关闭 生成map 以及 使用cdn 方式

gzip 压缩优化

参考: https://www.jb51.net/article/245599.htm

1、安装插件

npm install compression-webpack-plugin@6.1.1

2、vue.config.js 配置 gzip 压缩

// 引入
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']


// 压缩配置
    configureWebpack: {
        plugins: [
            // 配置 compression-webpack-plugin 压缩
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                // 对超过10kb的文件gzip压缩
                threshold: 10240,
                minRatio: 0.8,
                // 是否删除原资源
                // deleteOriginalAssets: false
            }),
        ]
    },

3、nginx 配置 gzip 压缩

# 开启 静态资源 压缩
gzip on;
gzip_min_length 2k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

4、查看