前言
vue项目作为一个单页面应用,如果不对路由进行处理,在加载首页的时候,就会将所有组件全部加载,并向服务器请求数据,这必将拖慢加载速度,这里我将介绍一些首屏加载方案。
按需加载
当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码.
修改前:
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-light.css'
Vue.use(MuseUI)
复制代码
修改后:
import appBar from 'muse-ui/src/appBar'
import toast from 'muse-ui/src/toast'
import drawer from 'muse-ui/src/drawer'
import popup from 'muse-ui/src/popup'
Vue.component(appBar.name, appBar);
Vue.component(toast.name, toast);
Vue.component(drawer.name, drawer);
Vue.component(popup.name, popup);
复制代码
这里有点麻烦的就是你要把整个项目用到的muse-ui组件都注册一遍,当然你也可以只在用到的页面做局部引用. 让我们来看看使用按需加载后的效果?
在当前项目引用了16个muse-ui组件的情况下 css减少了80kb,js减少了快200kb.
路由异步加载
官方文档是这么介绍的:
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
修改router
修改前:
import search from './search.vue'
{
path: '/search',
name: 'search',
component: search
}
复制代码
修改后:
const search = resolve => require(['./search.vue'], resolve);
{
path: '/search',
name: 'search',
component: search
}
复制代码
Nginx 开启 gzip
没有使用过,仅了解
使用cdn
打包时,把vue、vuex、vue-router、axios等,换用国内的bootcdn直接引入到根目录的index.html。 在webpack设置中添加externals,忽略不需要打包的库。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
},
// 格式为'aaa':'bbb',其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter
复制代码
在index.html中使用cdn引入
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
复制代码
去掉原有的引用,否则还是会打包
//去掉import,如:
//import Vue from 'vue'
//import Router from 'vue-router'
//去掉Vue.use(XXX),如:
//Vue.use(Router)
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 !