单页应用普遍存在一个问题,首屏加载的数据较大,因此时间上会稍长,可以从以下三个方面着手优化。
1、引入在线资源 替代 依赖包 在index.html使用cdn引入部分资源,例:
<body >
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>
</body>
还需要 修改 build/webpack.base.conf.js 中的 externals
module.exports = {
...//如果有用到Chrome的插件vue devtools之类的开发辅助插件,可能会引起无法检测到vue而使用不了,可以在开发模式时注释上
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'f2': 'F2'
}
...}
2、开启gzip打包
首先需要安装 compression-webpack-plugin