vue首屏加载优化

库使用状况

• vue

• vue-router

• axios

• muse-ui

• material-icons

• vue-baidu-map

未优化前

首先咱们在正常状况下build

优化

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组件都注册一遍,固然你也能够只在用到的页面作局部引用.
让咱们来看看使用按需加载后的效果?

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

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

这一步并无对项目产出的文件进行什么优化.而是优化了构建速度.
DllPlugin 预编译模块.有点像android开发中的lib Module,或者iOS的framework.
咱们能够对项目中用到的vue,vue-router,axios,muse-ui 这些固定的,基本不变更的模块进行预编译. 具体操做不在赘述,能够看一下这篇文章,也是我写的,可是以为本身没讲利索? .

看一下构建时间的结果对比:

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
}

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

由于个人项目目前只有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%的压缩比...哈哈

总结

1. 在使用ui库时,尽可能使用按需加载方式.

2. 异步加载,官方文档很详尽,改造起来也不难,能够试试

3. 合理规划三方库的引用.这个听起来有点龟毛,'收益'可能也不是很高,不过是个调整方向

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

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

若是你能看到这,十分感谢你赏脸听一个android开发bb前端开发? .

参考

• Vue SPA(单页应用)首屏优化实践

• Webpack的dll功能

• vue官方文档-异步组件