一：編碼階段

1. 盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會增加getter和setter，會收集對應的watcher。
2. v-if和v-for不能連用
3. 如果需要使用v-for給每項元素綁定事件時使用事件代理
4. SPA 頁面采用keep-alive緩存組件
5. 在更多的情況下，使用v-if替代v-show
6. key保證唯一
7. 使用路由懶加載、異步組件
8. 防抖、節(jié)流
9. 第三方模塊按需導入
10. 長列表滾動到可視區(qū)域動態(tài)加載
11. 圖片懶加載

二： SEO優(yōu)化

1. 預渲染
2. 服務端渲染SSR

三： 打包優(yōu)化

1. 壓縮代碼
2. Tree Shaking/Scope Hoisting（production的優(yōu)化）
   Tree Shaking：通常用于打包時移除JavaScript中未引用的代碼
   開發(fā)時引入一個模塊，只用到其中的一個功能，那么打包的時候只會打包用到的功能。
   Scope Hoisting：把你的打散的代碼整個在一起(只引用一次 的代碼)
3. 使用cdn加載第三方模塊
4. 多線程打包happypack
5. sourceMap優(yōu)化
6. splitChunks抽離公共文件

splitChunks抽離公共文件
webpack 4.x
optimization與output同級

 optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      chunks: 'async',
      minChunks: 2,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          // chunks 有三個可選值，”initial”, “async” 和 “all”. 分別對應優(yōu)化時只選擇初始的chunks，所需要的chunks 還是所有chunk
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /[\\/]node_modules[\\/]/
        }
      }
    }
  },

四：用戶體驗

1. 骨架屏
2. PWA
   還可以使用緩存(客戶端緩存、服務端緩存)優(yōu)化、服務端開啟gzip壓縮等。

五：解決vue打包wendor過大的問題

http://www.itdecent.cn/p/b2fe6aebe691