详解Vue SPA项目优化小记

import echarts from 'echarts/lib/echars'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

图片转base64

小图片可以转为base64字符串然后嵌入img的src中，节省http请求数量,webpack中用url-loader处理,limit控制了图片转base64的阈值，小于该值就转base64

 {
 test: /.(png|jpe?g|gif|svg)(?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },

优化后性能

经过上述优化后，首页打开时间迅速下降，DomContentLoaded用时不到1s，load完全加载用时不到4s，耗时较多的是几张背景大图，本来体积就大，后续考虑放到cdn上

这是最初的优化策略，后续继续会进行深度优化。

ps：webpack-bundle-analyzer是神器，能够有效分析出包占用的体积情况~下图是最终优化后的包组成结构图，最初打包的结构图比下图大很多，主要多了echarts,vue,vue-router,vuex模块

优化后的整个包gzip后大小喜人~