vue：首屏加载优化方案

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

1. 使用CDN资源,减小服务器带宽压力
2. 路由懒加载
3. 将一些静态js css放到其他地方（如OSS），减小服务器压力
4. 按需加载三方资源，如iview,建议按需引入iview中的组件
5. 使用nginx开启gzip减小网络传输的流量大小
6. 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
7. 使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件
8. 异步组件，类似路由懒加载
9. js外联文件放到body底部，css外联文件放到head内
10. http静态资源尽量用多个子域名
11. 尽量减少http requests的数量
12. js/css/html/img资源压缩
13. 使用css spirtes，可以减少img请求次数
14. 大图使用lazyload懒加载
15. 避免404，减少外联js
16. 减少cookie大小可以提高获得响应的时间
17. 减少dom elements的数量
18. 使用异步脚本，动态创建脚本

什么是CDN和CDN的好处

​ CDN:CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。

好处：
1、多域名加载资源 一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。 因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存 一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度

3、高效率 你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。

4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。

5、使用情况分析 一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。

6、有效防止网站被攻击 一般情况下CDNs提供商也是会提供网站安全服务的

vue.config.js

采用如下配置：cdn引入

const path = require("path");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
function resolve(dir) {
  return path.join(__dirname, dir);
}
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 本地环境是否需要使用cdn
const devNeedCdn = true

// cdn链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ElementUI'
    },
    // cdn的css链接
    css: [
      'https://unpkg.com/element-plus@1.1.0-beta.5/dist/index.css', // element-ui样式cdn
    ],
    // cdn的js链接
    js: [
      'https://unpkg.com/vue@3.1.2', // vue cdn
      'https://unpkg.com/vue-router@4', // vue-router cdn
      'Https://unpkg.com/vuex@4', // vuex cdn
      'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js', // axios cdn
      'https://unpkg.com/element-plus@1.1.0-beta.5/dist/index.full.js', // element-ui plus cdn
    ],
    threeJs: [
      // 'https://webapi.amap.com/maps?v=1.4.15&key=*********************', // amap cdn
      // 'https://ssl.captcha.qq.com/TCaptcha.js', // 腾讯防水墙 cdn
    ]
}


// 代码压缩
const compress = new CompressionWebpackPlugin({
  algorithm: 'gzip',
  threshold: 10240,
  test: /\.(js|css)$/,
  minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  deleteOriginalAssets: false, // 删除原文件
});

module.exports = {
  publicPath: './',
  productionSourceMap: false,
  lintOnSave: false,

  chainWebpack: config => {

    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("public", resolve("public"));

    
    // ============注入cdn start============
    config.plugin('html').tap(args => {
        // 生产环境或本地需要cdn时，才注入cdn
        if (isProduction || devNeedCdn) {
          args[0].cdn = cdn
        }
        return args
    })
    // ============注入cdn end============
  },
  configureWebpack: config => {
    // 用cdn方式引入，则构建时要忽略相关资源
    if (isProduction || devNeedCdn) {
      config.externals = cdn.externals
    }
  },
  //
  configureWebpack: {
    plugins: [compress],
  },
  // 全局引入less变量文件
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/less/common.less'),
        path.resolve(__dirname, 'src/less/resetElement.less')
      ],
    },
  },
};