关于vue首屏加载优化的介绍-tutorial js-php.cn

关于vue首屏加载优化的介绍

不言

Lepaskan： 2018-06-29 10:57:26

asal

2576 orang telah melayarinya

这篇文章主要介绍了浅谈vue首屏加载优化，内容挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了浅谈vue首屏加载优化，分享给大家，具体如下：

库使用情况

vue
vue-router
axios
muse-ui
material-icons
vue-baidu-map

未优化前

首先我们在正常情况下build

优化

1. 按需加载

当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码.

修改前：

import MuseUI from &#39;muse-ui&#39;
import &#39;muse-ui/dist/muse-ui.css&#39;
import &#39;muse-ui/dist/theme-light.css&#39;
Vue.use(MuseUI)

Salin selepas log masuk

修改后：

import appBar from &#39;muse-ui/src/appBar&#39;
import toast from &#39;muse-ui/src/toast&#39;
import drawer from &#39;muse-ui/src/drawer&#39;
import popup from &#39;muse-ui/src/popup&#39;

Vue.component(appBar.name, appBar);
Vue.component(toast.name, toast);
Vue.component(drawer.name, drawer);
Vue.component(popup.name, popup);

Salin selepas log masuk

这里有点麻烦的就是你要把整个项目用到的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 &#39;./search.vue&#39;
{
      path: &#39;/search&#39;,
      name: &#39;search&#39;,
      component: search
}

Salin selepas log masuk

after：

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

Salin selepas log masuk

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