index.html中的优化

prefetch 与 dns-prefetch 、preconnect

prefetch

关键字 prefetch 作为元素的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。MDN

上面这段话截至MDN，可能有点拗口。简单解释一下：就是rel=prefetch的link标签会告诉浏览器，哪些资源可以在闲时加载。比如你优先拉取首屏资源，然后空闲时自动拉取别的资源，这样网站的速度肯定会加快很多。这块主要由webpack负责

dns-prefetch

DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。MDN

这段话就好理解多了，就是提前去dns解析三方的域名。当我们需要引用三方库的时候，这个很有用。例如你要引用www.jsdelivr.com/ 上一个包，你就可以提前dns解析这个地址，可以加快三方cdn库的加载速度。这个兼容性略差，建议与preconnect一起使用

preconnect

preconnect 允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间。这个我在MDN上并没有找见文档，有可能是一个实验性的功能，但是兼容性还是可以的。

css懒加载的2种方法

某些css也会阻碍网页的渲染，因此最好延迟加载，延迟加载有2种方法

link标签

<link media="none" onload="this.media='all'" href="<%= BASE_URL %>fonts/LuckiestGuy/index.css" rel="stylesheet">

js代码


const lazyCss = (href)=>{
  const link = document.createElement('link')
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('href', href)
  link.setAttribute('type','text/css' )
  document.querySelector('head').appendChild(link)
}

我通常在App.vue的created里或者首页的mounted里执行

main.js中的优化

npm包的延迟加载与@babel/plugin-syntax-dynamic-import

其实浏览中的原生ESM是支持原创加载的，返回一个promise例如：

import('xxx.js')
    .then(module=>{
       console.log(module)
    })

但是这个功能最好配合babel插件使用。

组件中的优化

懒加载时手动指定打包文件名

const CheckinAlert=()=>import(/* webpackChunkName: "alert" */'@/themeComponents/theme3/checkinAlert.vue'),

webpack打包的一个小技巧，建议按页面区分

打包时的优化

减少vendor的大小

这是从别的网上看到的一段代码，本质是就是把node_modules的每个库独自打包

configureWebpack: config=>{
    config.optimization.splitChunks.cacheGroups.vendors={
        name(module){
       const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1].toLowerCase()
       return `package.${packageName.replace('@', '')}`

        }
    }

}

但是，有时候一些三方库其实很小，有的甚至不到1kb，单独打包成一个js其实造成了http请求太多。因此这里我修改了一下，按数量合并。因为我水平有限，所以写的很简单粗暴，如果大家有更好的建议，望不吝赐教。


const packNameList = new Array(60).fill('').map((e,i)=>({name:`package${i}`,count:0}))

configureWebpack: config=>{
    config.optimization.splitChunks.cacheGroups.vendors={
     name(module){
       const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1].toLowerCase()   
    const index = packNameList.findIndex(e=>e.count<=15)
    if(index> -1&&packageName.indexOf('vue')===-1){
      const one = packNameList[index]
      packNameList[index].count = packNameList[index].count+1
      return one.name
    }
       return `package.${packageName.replace('@', '')}`
    }
  }
}

以上就是我最近做的一些优化总结，希望大家一起讨论一起进步

记录优化Vue-Cli的那些事（中级）