脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli 首屏加载优化

vue-cli 首屏加载优化问题

 更新时间：2018年11月06日 17:15:52   作者：lxy3344  
这篇文章主要介绍了vue-cli 首屏加载优化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体,

打包位置是 dist/static/js/app.[contenthash].js  

类似下面的路由代码

router/index.js 路由相关信息,该路由文件引入了多个 .vue组件
import Personal from '@/components/page/Personal'
import Message from '@/components/personnal/Message'
import Settings from '@/components/personnal/Settings'
import Setlanguage from '@/components/personnal/children/Setlanguage'

npm run build 会打包成一个app.[contenthash].js，这个文件会非常大，影响加载速度。

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去

分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,

相同 chunk名字的模块将会打包到一起。

const Personal = r=>require.ensure([],()=>r(require('@/components/page/Personal')),'personal');
const Message = r=>require.ensure([],()=>r(require('@/components/personnal/Message')),'personal');
const Settings = r=>require.ensure([],()=>r(require('@/components/personnal/Settings')),'personal');
const Setlanguage = r=>require.ensure([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');

根据 chunname的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)

总结

以上所述是小编给大家介绍的vue-cli 首屏加载优化问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue+Openlayer使用modify修改要素的完整代码

    Vue+Openlayer使用modify修改要素的完整代码

    这篇文章主要介绍了Vue+Openlayer使用modify修改要素的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-09-09
  • vue v-for 使用问题整理小结

    vue v-for 使用问题整理小结

    使用v-for指令的时候遇到一个错误问题，具体错误代码在文章给大家列出，对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
    2019-08-08
  • vue实现同时设置多个倒计时

    vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue中onmounted周期里获取不到dom的原因及分析

    vue中onmounted周期里获取不到dom的原因及分析

    这篇文章主要介绍了vue中onmounted周期里获取不到dom的原因及分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 解决vue 引入子组件报错的问题

    解决vue 引入子组件报错的问题

    今天小编就为大家分享一篇解决vue 引入子组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue mvvm数据响应实现

    vue mvvm数据响应实现

    这篇文章主要介绍了vue mvvm数据响应实现的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-11-11
  • vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解

    vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解

    这篇文章主要介绍了vue3 el-table结合seamless-scroll实现表格数据滚动,创建两个table，隐藏第一个table的body部分，这样就能得到一个固定的head，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • vue引用BootStrap以及引用bootStrap-vue.js问题

    vue引用BootStrap以及引用bootStrap-vue.js问题

    这篇文章主要介绍了vue引用BootStrap以及引用bootStrap-vue.js问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue之nextTick全面解析

    vue之nextTick全面解析

    本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue+ ArcGIS JavaScript APi详解

    Vue+ ArcGIS JavaScript APi详解

    这篇文章主要介绍了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大，本文从环境搭建开始到测试运行给大家讲解的非常详细，需要的朋友可以参考下
    2022-11-11

最新评论