浅谈vue首屏加载优化

修改router

before：

import search from './search.vue'
{
      path: '/search',
      name: 'search',
      component: search
}

after：

const search = resolve => require(['./search.vue'], resolve);
{
      path: '/search',
      name: 'search',
      component: search
}

具体我们来看看改造后的效果:

因为我的项目目前只有7个页面,即使把页面都做成异步加载,效果并不是很’喜人’,整体缩小了30kb.

4. 优化组件加载时机

再使用别人的组件时,上手教程都会提示让你在main.js里注册一下就好.当然这是最省事的办法.

但是根据项目情况,比如我的项目用到了vue-baidu-map.

如果你按照默认的加载方式,vue-baidu-map是会被打在vendor.js .但其实这个组件我只有某个二级页面才使用.所以让我们来调整一下加载位置看看.把注册的vue-baidu-map放在真正使用它的地方.

这样,verdor.js 又小了56kb.因为首页根本用不到vue-baidu-map. 当然这样会带来一个问题:当多个页面使用vue-baidu-map,会出现多个页面重复打包.

怎么异步加载插件,这个我还没搞明白…

5. webpack-bundle-analyzer

webpack-bundle-analyzer是用来分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的工具.你可以通过命令:

npm run build --report

来查看依赖关系.然后再根据具体情况划分代码块.效果图就是上面那张花里胡哨的图…它清楚的告诉你了打包时模块划分的情况.

6. 前后对比:

638.7kb vs 286.2kb

这还是在未开启gzip的情况下.

新增一张开启gzip的截图,84.8kb,相对最后的优化结果286.2kb是70%的压缩比…哈哈

总结