vue-cli 首屏加载优化问题
作者：lxy3344 发布时间：2024-05-29 22:48:54
标签：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 首屏加载优化问题网站的支持！
来源：https://blog.csdn.net/lxy3344/article/details/83790576
0
投稿猜你喜欢
- 在使用javascript编程时浏览器中经常会遇到的两个麻烦，下面提供两个函数解决方式做参考，并提供一个demo让你更直观地了解我所说的这两
- 前言argsparse是python的命令行解析的标准模块，内置于python，不需要安装。这个库可以让我们直接在命令行中就可以向程序中传入
- 提高MySQL 查询效率的三个技巧小结MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发
- 下面这个例子描述的是在Godaddy-Linux托管帐户上使用JSP连接到某个MySQL数据库。 <％@ page
- import "strconv"strconv 包实现了基本数据类型和其字符串表示的相互转换。string与int类型转
pycharm程序界面一般有很多子窗口，如图1所示。pycharm项目视图-运行窗口图1 Pycharm子窗口如果你发现某些子窗口不见了，图- 在说这两兄弟前，先做一个实验：我在Win7下新建左一个文本文件test.txt，然后用记事本打开输入如下内容，保存然后用UltraEdit以
- 1.流程控制语 break用于结束整个循环结构，直接退出整个循环例：用两种循环模拟密码输入输入正确就退出循环，输入错误可以重新输入，有三次输
- 一、用户管理在mysql库里有个user表可以查看已经创建的用户1.创建MySQL用户注意：MySQL中不能单纯通过用户名来说明用户，必须要
- tpch是TPC(Transaction Processing Performance Council)组织提供的工具包。用于进行OLAP测
- 本文实例讲述了PHP实现的线索二叉树及二叉树遍历方法。分享给大家供大家参考，具体如下：<?php require '
- 一，设计背景 由于所在公司ORACLE数据库较多，传统人工监控表空间的方式较耗时，且无法记录历史表空间数据，无法判断每日表空间增长
- 引言“ 这是MySQL系列笔记的第九篇，文章内容均为本人通过实践及查阅资料相关整理所得，可用作新手入门指南，或
- 环境： Python3 + windows。开发工具：Anaconda + Jupyter / VS Code。学习效果：1.认识爬虫 /
- 前言本博客重点：folium的使用功能，图层控制、指北针、folium添加js和css、经纬网格线（栅格线）在上一篇使用folium制作地图
- 单线程实现多个定时器NewTimer.py#!/usr/bin/env pythonfrom heapq import *from thre
- JavaScript 中的并没有提供像 VBScript 里的 DateAdd 方法用于日
- PyQt5安装在cmd下输入pip install PyQt5完成PyQt5安装，再安装qt designer，可以使用pip安装pip i
- 之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。效果图：子组件 dropdown.vue<template
- 本文实例为大家分享了Vue点击显示不同图片的具体代码，供大家参考，具体内容如使用Vue中的以下知识点来显示效果①：v-for：循环遍历数据②
