Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

时间:2022-02-08 20:49:20

  关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车!

1、webpack2 + ES5结合开车

没发车前,我们页面加载的js是这样的:

   Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

   任你随便点,你就只加载了这一个app.js文件,你所有的组件都在这里面

   准备发车:把你的路由中引入组件的方式改成这样:

    Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

再来看看我们的页面上加载的js文件(开车后):

Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

只有当你加载了这个CityPicker组件的时候,我才引入它,也就是0.js,这就实现了异步加载,大概意思就是把我们的组件变成了一个函数,刚开始的时候它是不执行的,只有当你需要它的时候来触发它了它才会加载进来。

  

1、webpack代码分割结合AMD规范的require

  开车前就不说了,无论你怎么挣扎,你所有的东西都在app.js里,一次性全给你加再进来,准备发车:

    发车准备:把你路由里面引入组件的形式变成这样:

  Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

  发车后的形态:

  Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

 

 漂亮,同样达到了我们想要的效果

 

3、webpack的ensure来进行终极开车:

  简单说一下它的思想:webpack编译时,会静态的解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。

  一共有三个参数:

  参数一:字符串数组,模块的依赖项,会提前进行加载,一般情况下为空。

  参数二:依赖项加载完成之后的回调函数。

  参数三:chunk名。相同chunk名的文件,所有的依赖都会被放进相同的文件束中。

  开始发车

  发车前:将你的引入组件的方式改成这样:

  Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

 

  发车后:

  Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

  同样实现了异步加载,并且最终要的是,City就是chunk名,相同chunk名的的文件,所有的依赖都会被放到相同的文件束中。

 

 

异步加载可以大大的提高性能,避免不必要的资源浪费,今天关于vue的性能优化就先到这里,下课,额再补充几个Vue中性能优化的方法吧:

  1. 可以使用computed计算属性来代替一些函数方法,(函数的话每次都会调用一次,计算属性是根据它依赖的值变化了才会执行)

       2. 对于一些不需要频繁调用的形式,使用v-if来取代v-show。(v-if的话是只有它存在了才会进行渲染,而v-show是无论如何都会渲染,只不过是将它隐藏了而已)

  3. 为item设置唯一的key值。(快速精准的定位到diff);

  4. SSR(服务器端渲染);

  5. 骨架屏加载。(在数据还没来之前显示骨架屏,提高用户体验);

  6. loading图。(提高用户体验度,用户第一);

  7. 图片按需加载,图片懒加载技术。(避免不必要的资源浪费)。

...未完待续