//异步组件，路由懒加载 const BookMark = resolve => require(['@/components/BookMark'],resolve); const HotBookMark = resolve => require(['@/components/HotBookMark'],resolve); const ImportBookMark = resolve => require(['@/components/ImportBookMark'],resolve); const Default = resolve => require(['@/components/Default'],resolve);
打包后查看js文件夹下的文件，会多出上述文件，每个进行懒加载的组件都会生成一个js，如下图红框内
第三方按需加载
比如本项目里面使用的echarts，只用到了一个柱状图组件，其余的都没有用到，但是这样import后打包时却会把整个echarts都打入包内，造成空间浪费
import echarts from 'echarts'
因此只需要import用到的组件即可，如下，这样就可以减少很多不必要的体积
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后大小喜人~
