Vue 项目性能优化
（1）代码层面的优化
- 长列表性能优化
- 事件的销毁
- 图片资源懒加载
需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。(使用 Vue 的 vue-lazyload 插件)
- 路由懒加载
- 第三方插件的按需引入
直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。
- 优化无限列表性能
- 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
- Webpack 对图片进行压缩
在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片
- 减少 ES6 转为 ES5 的冗余代码
- 提取公共代码
Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin
- 模板预编译
- 提取组件的 CSS
- 优化 SourceMap
- 构建结果输出分析
- Vue 项目的编译优化
（3）基础的 Web 技术的优化
-
开启 gzip 压缩
-
浏览器缓存
-
CDN 的使用
-
使用 Chrome Performance 查找性能瓶颈
1、打开 Chrome 开发者工具，切换到 Performance 面板
2、点击 Record 开始录制
3、刷新页面或展开某个节点
4、点击 Stop 停止录制
网络请求优化
- CDN
将第三方的类库放到CDN上，能够大幅度减少生产环境中的项目体积。
CDN能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
在vue-cli3中可以通过externals配置项，将第三方的类库的引用地址从本地指向你提供的CDN地址。 目的就是将不需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式。
- 合理的缓存策略
将长时间不会改变的第三方类库或者静态资源设置为强缓存,将max-age设置为一个非常长的时间。
-
gzip 压缩
-
link标签的属性
构建相关优化
- 路由懒加载
通过import()使得ES6的模块有了动态加载的能力，让url匹配到相应的路径时，会动态加载页面组件，这样首屏的代码量会大幅减少，webpack会把动态加载的页面组件分离成单独的一个chunk.js文件。
- 按需加载
- 使用可视化工具分析打包后的模块体积 通过webpack-bundle-analyzer这个插件在每次打包后能够更加直观的分析打包后模块的体积，再对其中比较大的模块进行优化
静态资源优化
- 图片懒加载
- 压缩图片
