vue首屏加载优化

2019年8月25日 162次阅读 来源: 诗人的咸鱼

库运用状况

  • vue

  • vue-router

  • axios

  • muse-ui

  • material-icons

  • vue-baidu-map

未优化前

起首我们在一般状况下build
《vue首屏加载优化》

优化

1. 按需加载

当前盛行的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组件都注册一遍,固然你也能够只在用到的页面做部分援用.
让我们来看看运用按需加载后的效果?

《vue首屏加载优化》

在当前项目援用了16个muse-ui组件的状况下 css减少了80kb,js减少了快200kb.

2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化

这一步并没有对项目产出的文件举行什么优化.而是优化了构建速率.
DllPlugin 预编译模块.有点像android开辟中的lib Module,或许iOS的framework.
我们能够对项目中用到的vue,vue-router,axios,muse-ui 这些牢固的,基础不更改的模块举行预编译. 详细操作不在赘述,能够看一下这篇文章,也是我写的,然则以为本身没讲利索? .

看一下构建时候的效果对照:

《vue首屏加载优化》

before:38291ms
after :10089ms

项目中多了core.dll.css和core.dll.js 他们就是分别出来的牢固的,基础稳定的模块,所以只须要编译一次,今后援用就好.有点library的觉得.如许每次构建省去了构建牢固模块的时候. 时候有38s降到了10s,假如你构建比较频仍,应当照样很有效的.

3. 异步组件 官方文档

官方文档是这么引见的:

在大型运用中，我们能够须要将运用拆分为多个小模块，按需从服务器下载。为了让事变更简朴， Vue.js 许可将组件定义为一个工场函数，动态地剖析组件的定义。Vue.js 只在组件须要衬着时触发工场函数，而且把效果缓存起来，用于背面的再次衬着。

修正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
}

详细我们来看看革新后的效果:
《vue首屏加载优化》
由于我的项目现在只要7个页面,纵然把页面都做成异步加载,效果并非很’喜人’,团体缩小了30kb.

4. 优化组件加载机遇

再运用他人的组件时,上手教程都邑提醒让你在main.js里注册一下就好.固然这是最费事的方法.
然则依据项目状况,比方我的项目用到了vue-baidu-map.
假如你根据默许的加载体式格局,vue-baidu-map是会被打在vendor.js .但实在这个组件我只要某个二级页面才运用.所以让我们来调解一下加载位置看看.把注册的vue-baidu-map放在真正运用它的处所.

《vue首屏加载优化》

如许,verdor.js 又小了56kb.由于首页基础用不到vue-baidu-map. 固然如许会带来一个题目:当多个页面运用vue-baidu-map,会涌现多个页面反复打包.

《vue首屏加载优化》

怎样异步加载插件,这个我还没搞邃晓…

5. webpack-bundle-analyzer

webpack-bundle-analyzer是用来剖析 Webpack 天生的包体构成而且以可视化的体式格局反馈给开辟者的东西.你能够经由过程敕令:

npm run build --report

来检察依靠关联.然后再依据详细状况分别代码块.效果图就是上面那张花狸狐哨的图…它清晰的通知你了打包时模块分别的状况.

6. 前后对照:

《vue首屏加载优化》

《vue首屏加载优化》

638.7kb vs 286.2kb
这照样在未开启gzip的状况下.

新增一张开启gzip的截图,84.8kb,相对末了的优化效果286.2kb是70%的紧缩比…哈哈
《vue首屏加载优化》

总结

  1. 在运用ui库时,只管运用按需加载体式格局.

  2. 异步加载,官方文档很详实,革新起来也不难,能够尝尝

  3. 合理计划三方库的援用.这个听起来有点龟毛,’收益’能够也不是很高,不过是个调解方向

  4. 善用webpack-bundle-analyzer优化项目依靠

  5. 服务端开启 gzip紧缩,谁用谁知道！

假如你能看到这,非常谢谢你赏光听一个android开辟bb前端开辟? .

参考

    原文作者：诗人的咸鱼
    原文地址: https://segmentfault.com/a/1190000010042512
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞