前言
我们通常在web项目中希望优化得到的结果一般是：1、资源变小；2、加载变快；资源变小通常我们的打包工具就行做到，加载变快的话，这个除了利用好工具之外，还需要我们对项目部分资源进一步合理的分配加载时机。
环境
- 系统：windows10
- 脚手架：vue-cli2、vue-cli3
推荐文章
html 中的优化
// 省略协议部分，节省体积，浏览器优先采用服务器自身协议（感觉作用很小）
<link href="//www.baidu.com">
// dns预解析，提高后续对此服务器资源的请求效率（感觉作用很小）
<link rel="dns-prefetch" href="//www.server.com">
// 预加载 preload，在body中脚本之前先加载资源，但是不执行，待script引入后执行
<link rel="preload" href="style.css" as="style">
// 预加载 prefetch，在body中脚本执行之后加载资源，一般用于多页面，单页面我感觉用不到
<link rel="prefetch" href="main.js" as="script">
// 预渲染，通常用于在首页html中，预先渲染好其他html页面，待跳转到目标页面时提高效率
<link rel="prerender" href="//example.com">
资源优化
- 字体图标，集中管理纯色的小图标，适合一个图标大小和颜色频繁变动的场景；我们可以使用阿里字体图标；
- 利用 cdn 资源（cdn会就近取最近的网络服务器上的资源），减少本地资源大小；
webpack
优化打包速度
- 配置一些webpack属性减少webpack打包范围
- 配置模块规则的 include、exclude，指定打包时的解析覆盖范围
- 配置别名 alias，减少程序向上递归查找资源的过程，直接告诉 webpack 应该去哪里查找依赖；
- 配置 noParse，对于 jquery 这种没有依赖其他模块的包，配置后不会被 webpack 解析
- 配置 extensions，指定常用后缀，import 没有后缀的文件名，会优先以配置为条件查找
- 配置 externals，指定无需打包的外部引入模块
- 利用 happypack 插件，实现多线程打包提高打包效率；
- 利用 DllPlugin、AutoDllPlugin，抽离依赖中不常变动的静态资源，避免重复打包；
减少打包体积
- 目前 webpack 中针对 js、css等资源的压缩基本上都已经很ok了，可能生产环境按需看需不需要打包 sourcemap 资源；
- vue-cli2 中 webpack 的 extract-text-webpack-plugin 插件配置 allChunks 默认是 true，会导致所有模块的 css 都会打包到 app.css 中，影响首屏加载，设置为 false，让模块各自的 css 资源分离开然后配合懒加载能提高首屏加载效率；
- 可以让服务端开启 gzip 压缩，进一步减少生产环境上的资源大小；
- 尽量减少 main.js 中引入资源的大小，避免 app.js 太大；
懒加载
- 利用 webpack ，结合 vue-router 中路由懒加载实现路由模块资源的延迟加载，提高首屏加载效率；
- 利用 webpack ，结合 vue 异步组件的加载方式，延迟加载组件资源，提高首屏加载效率；
- 一些在 html 中的 cdn 等外部资源，如果不是一开始就必要的，可以自己将资源，通过动态创建 link、script 标签的方式，选择在需要的地方引入后监听 js 脚本 onload 来达到动态引入的目的，注意利用单例思想避免重复引入就好；
代码
- 避免内存泄露（手动监听的事件必须合理销毁，变量合理重置为 null）
- 避免一次性加载大数据量内容等等（列表中采用分页、树形数据中采用子数据懒加载等方案）
- 避免 JSON.stringify 和 JSON.parse 的参数层级特别深
- 利用事件节流（throttle）和防抖（debounce）优化频繁触发事件
- 利用懒加载库（lazy-load）优化多图显示：对于非常多的图片展示页面，可采用懒加载库，让可见区域优先加载，非可见区域延迟加载
- 合理发送 ajax 请求，减少不必要的请求
