vue首屏加载优化

1.异步路由加载

import Vue from 'vue'
import Router from 'vue-router'
// 之前的方案
// import Index from '@/pages/index/'
// import ChooseUser from '@/pages/detail/chooseUser'
// 异步加载方案
const Index = r =>
  require.ensure([], () => r(require('@/pages/index')), 'Index')
const ChooseUser = r =>
  require.ensure([], () => r(require('@/pages/detail/chooseUser')),'ChooseUser')
Vue.use(Router)

export default new Router({
  // mode:'history',// 开发阶段开启
  routes: [
    {
      path: '/board/index/:id?',
      name: 'Index',
      component: Index
    },
    {
      path: '/board/chooseUser',
      name: 'ChooseUser',
      component: ChooseUser
    }
  ]
})

2.不打包库文件

spa首屏加载慢,主要是打包后的js文件过大,阻塞加载所致。那么如何减小js的体积呢?
那就是把库文件单独拿出来加载,不要参与打包。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>test</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
    <link rel="stylesheet" href="/static/common/css/base.css">
  </head>
  <body style="margin:0;background:#f2f2f2;">
  <script src="/static/common/js/polyfill.min.js"></script>
  <!--vue-->
  <script src="/static/common/js/vue.min.js"></script>
  <!--vue-router-->
  <script src="/static/common/js/vue-router.min.js"></script>
  <!--axios-->
  <script src="/static/common/js/axios.min.js"></script>
  <!--element-ui-->
  <link href="/static/common/js/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <script src="/static/common/js/element-ui/lib/index.js"></script>
  <!--echarts-->
  <script src="/static/common/js/echarts.min.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
webpack.base.conf.js
  externals: {
    'element-ui': 'ELEMENT',
    'vue': 'Vue',
    'axios': 'axios',
    'echarts': 'echarts',
    'vue-router': 'VueRouter'
  },

这个键值对大家需要重点关注一下,配置错了这些大文件仍旧参与打包,导致优化失败。
键(key),就是你用npm install命令装的插件名称,不确定的话,找一下package.json文件对一下。
值(value),就是对外提供的那个对象,这个你得打开库文件看看咯。
比如element UI:


elment-ui.png

element-ui是通过exports模块导出ELEMENT这个变量,所有的功能也应该追加到这个变量下面。
再比如vue-router:


1.png

看一下未压缩过的代码,发现作者是在VueRouter.prototype下面追加了不少方法,因此基本可以确定对外导出的对象应该是VueRouter了。
这个办法可以极大的压缩js代码的体积,应重点掌握。
但有同学还会有这样的疑问:
既然在外部引入了库文件,那在main.js里面,是不是就不能这样引用库了:

main.js

import Vue from 'vue'
import App from './App'
import router from './router' // 路由
import ElementUI from 'element-ui'// UI插件
import echarts from 'echarts'// 引入图表插件
Vue.prototype.$echarts = echarts // 追到全局
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

是吗?
当然不是了!你该怎么import还是一样,否则怎么追加到Vue这个对象下面呢?

3.关闭sourcemap

sourcemap是为了方便线上调试用的,因为线上代码都是压缩过的,导致调试极为不便,而有了sourcemap,就等于加了个索引字典,出了问题可以定位到源代码的位置。
但是,这个玩意是每个js都带一个sourcemap,有时sourcemap会很大,拖累了整个项目加载速度,为了节省加载时间,我们将其关闭掉。

config/index.js
    /**
     * Source Maps
     */

    productionSourceMap: false,

就这一句话就可以关闭sourcemap了,很简单。

4.开启gzip压缩

这个优化是两方面的,前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件。

webpack的配置

config/index.js
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],
build/webpack.prod.conf.js
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

好了,做完这两步,打包后的代码就是酱紫的了:


gzip.png

nginx的配置

修改服务器的nginx 配置,找到conf目录下的nginx.conf ,开启gzip,并设置gzip的类型,如下:

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

重启nginx:

nginx -s reload

最后验证一下:


check.png

小结

以上几种优化方案较常用,效果也立竿见影,这是我们的一个项目优化过的代码:


demo.png

除了echart文件较大之外,其他的小文件基本不会造成太大影响,而如果让这些库文件参与打包,那至少得有个几m。

首屏较慢的处理办法

首屏加载过慢的问题如何解决呢?
如果做完以上的优化方案,仍嫌过慢的话,可以这样做:

1.loading效果

首页加个好看的loading阻塞一下,让用户别等的那么心焦。

2.首页单独做服务端渲染

如果首页真的有瓶颈,兼考虑seo问题,那还是用node的mvc框架(比如express)做首页渲染,而下面的子页面仍用spa单页(将vue打包的dist目录放在public目录下,当静态资源来访问)。
这里不推荐直接用nuxt.js服务端渲染方案。
因为一是增加了学习成本,二是本来渲染就是浏览器该做的事情啊,凭什么让服务端来掺和?
服务端组装页面需耗费巨大的内存资源,很容易把服务器搞死,而且这种方案对代码质量要求非常高,如果你不注意资源的回收而造成内存泄露,浏览器重新刷一下就可以了,而服务端呢?你重启一下?一次宕机事故是要记入绩效考核的,宕机几次你一个月工资就没了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,637评论 1 318
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,443评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,164评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,075评论 0 188
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,080评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,365评论 1 184
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,901评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,649评论 0 176
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,122评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,734评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,093评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,548评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,028评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,765评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,291评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,162评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,293评论 2 242

推荐阅读更多精彩内容