1、vue-router 路由[懒加载]

 components: () => import("@/components/Hello.vue")

2、使用[CDN]加速，将通用库从vendor进行抽离

cdn：构建在现有的网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的[负载均衡]、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

在index.html中引入,

<!-- 首屏优化，使用cdn引入外部文件 -->
<!-- vue主要的js文件-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<!-- element-ui的文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  组件库引入-->
<script src="https://cdn.bootcss.com/element-ui/2.15.2/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.5.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.21.1/axios.min.js"></script>

2.vue.config.js配置外部文件

configureWebpack:{
    externals: {
        'vue':'Vue',
        'vue-router':'VueRouter',
        'axios':'axios',
        'element-ui':'Element',
    }
}

main.js不用导入elementui，因为是全局引入，需要的直接使用就行

// import ElementUI from "element-ui"; 
// import "element-ui/lib/theme-chalk/index.css"; 
// Vue.use(ElementUI);

3 打包分析

执行 npm run report命令，就会在dist目录下生成一个 report.html 文件，右键浏览器中打开即可看到打包分析报告。

我们可以针对报告中的问题逐一进行优化

4.减少请求次数

vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了

preload 与 prefetch 都是一种资源预加载机制；
preload 是预先加载资源，但并不执行，只有需要时才执行它；
prefetch 是意图预获取一些资源，以备下一个导航/页面使用；
preload 的优先级高于 prefetch。

//vue.config.js 
chainWebpack(config) { 
    config.plugins.delete('preload') // 删除默认的
    preload config.plugins.delete('prefetch') // 删除默认的prefetch 
}

原先项目首页近六百个请求，设置后降到一百左右，减少了http的连接，自然也就减少了首屏加载时间。

配置前：

配置后：

5、服务端渲染SSR

浏览器端渲染CSR（client side render）：页面上的内容时加载js文件渲染出来的，js文件运行在浏览器上，服务端只返回一个html文件

服务器端渲染SSR（server side的render）：页面上的内容都是由服务器端渲染生成，浏览器直接显示返回的html就可以了

6、页面使用骨架屏

vue中使用

在模板文件id=app容器中写入要展示的 html

<div id="app">
    <div>首屏加载中。。。</div>
</div>

在模板文件id=app容器中写入要展示的 图片
使用vue ssr提供的webpack插件

7、开启 gzip 压缩

安装依赖

npm install compression-webpack-plugin --save-dev

const CompressionPlugin = require('compression-webpack-plugin'); 
module.exports = { 
    configureWebpack: config => { 
    config.plugins = [ ...config.plugins, // 开启 gzip 压缩 
    new CompressionPlugin({ 
        filename: '[path][base].gz', 
        algorithm: 'gzip', 
        test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型 
        threshold: 10240, 
        minRatio: 0.8 
        }) 
      ] 
   }

8、js脚本使用异步和延迟

功能独立且不要求马上执行的js文件可以使用async，优先级低且没有依赖的js，加入defer

滴滴面试官：首屏优化有哪些解决方案最全的