阅读 2002

vue首屏加载优化

相关目录

以下为我总结的其他性能优化点,欢迎参考,指点及吐槽

前言

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)
复制代码

更多webpack优化,欢迎参考 webpack性能优化

文章分类
前端