有哪些常见的优化方法

1. 代码层面

• 区分使用 v-if 和 v-show
• v-for 遍历时必须使用 key，并且避免使用 v-if

  v-for 的优先级比 v-if 高，所以会先遍历所有元素然后再隐藏。应该使用一个计算属性完成筛选工作

• 长列表冻结：对于不需要响应式处理的数据，可以用Object.freeze将其冻结，这样该数据将不是响应式的，但可以减少组件初始化消耗时间
• 如果在 js 中addEventListener绑定了事件监听，要记得解绑监听的事件
• 图片懒加载：
  • 使用vue-lazyload插件
  • 在模板中将 img 标签的 src 属性换位 v-lazy

  // main.js
  import VueLazyload from 'vue-lazyload'
  Vue.use(VueLazyload)
  // xx.vue
  <img v-lazy="/static/img/1.png">
  

• 路由懒加载：当路由被访问时才加载相关组件

  const Foo = () => import("./Foo.vue");
  const router = new VueRouter({
    routes: [{ path: "/foo", component: Foo }],
  });
  

• 使用服务端渲染或预渲染

2. Webpack 层面的优化

• 使用image-webpack-loader插件对图片进行压缩
• 使用babel-plugin-transform-runtime插件去除 ES6 转 ES5 时的冗余代码
• 样式较少时，使用mini-css-extract-plugin将组件的样式提取到同一个 css 文件中。同时要用MiniCssExtractPlugin.loader取代style-loader，目的是提取 JS 中的 css 样式
• 使用terser-webpack-plugin压缩 JS 代码
• 生产环境中不生成sourceMap
• 启用treeShaking、sideEffect特性

3. 通用的 web 优化方案

• 开启 gzip 压缩，需要服务器端和客户端同时支持
• 浏览器缓存。
• 使用 CDN

4. 如何改善 SPA 的 SEO

• 服务端渲染 SSR
• 预渲染生成特定路由的静态页面
• 通过URL Rewrite的方法将外部请求的静态地址转换为实际的动态页面
• 使用Phantomjs配合NGINX对爬虫进行优化。即：
  • 若是户访问，返回正常的 SPA 应用
  • 若是爬虫，用Phantomjs返回页面信息

5. 如何改善 SPA 的首屏时间

• 服务端渲染 SSR
• 路由懒加载

const routes = [{
    path:'/foo',
    component: () => import('../components/Foo.vue');
}]

• 对于静态资源进行本地缓存
• 针对 webpack 打包的优化