[JavaScript知识库]vue首页加载优化vue使用cdn加载插件vue cdn优化

前言

问题: 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 方式