Web Front-endVue.jsWhat should I do if the Vue project loads slowly for the first time? Two solutions
What should I do if the vue project loads slowly for the first time? The following article will introduce to you the reasons why the vue page is slow to load for the first time and two solutions. I hope it will be helpful to everyone!
When the project that packaged vue was deployed to the server for the first time, I found that the initial loading was particularly slow. It took nearly 20 seconds for the page to load, which was not as smooth as in the development environment. . The main reason is that if the page is packaged without relevant configuration, the resource file will be extremely large, and it will be extremely time-consuming to load them all at once. Here is a brief summary of some optimization solutions I have used. (Learning video sharing: vuejs video tutorial)
First we can install the webpack-bundle-analyzer plug-in. Through this plug-in we can see the size of the packaged file when packaging, which can be clearly seen. to see which files are larger.
Solution 1
1. Remove the map file in the compiled file.
After compilation, we will see a lot of .map files in the folder. These files mainly help us debug the code online and view the style. Therefore, in order to avoid the deployment package being too large, these files are usually not generated.
Set the value of productionSourceMap to false in the config/index.js file. After packaging again, you can see that there is no map file in the project file (file size 35MB–>10.5MB)
2, vue-router routing lazy loading
Lazy loading is the delayed loading of components. Usually, when a vue page is entered after running, there will be a default page, while other pages can only be clicked on It needs to be loaded later. Using lazy loading can divide the resources in the page into multiple parts, thereby reducing the time spent on the first load.
Lazy loading routing configuration:
Non-lazy loading routing configuration:
As shown in the picture Shown as a js file packaged through lazy loading. Instead of lazy loading, there is generally only one app.js file after packaging.
Solution 2
Use CDN to reduce the code size and speed up the request
Why use CDN
Using CDN mainly solves two problems:
The packaging time is too long, the code size after packaging is too large, and the request is slow
The server network is not Stable bandwidth is not high, using CDN can avoid server bandwidth problems
Specific steps
1.Introduce CDN## in /index.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>Note: After modifying the configuration, it still prompts that Element is undefined. This is because Element depends on Vue, and vue.js needs to be introduced before element-ui, so vue.js must also be changed to the cnd introduction method.2. Modify the configuration in /build/webpack.base.conf.js. Add the externals attribute to module.exports (see https://webpack.docschina.org/configuration/externals/ for details), where the key is the one referenced in the project and the value is the name of the referenced resource. It should be noted that the resource name needs to check the referenced JS source code to see what the global variables are. For example, the global variable of element-ui is ELEMENT module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}3. Delete the original importIf you do not delete the original import, the project will still introduce resources from node_modules. In other words, if you do not delete it, the referenced resources will still be packaged together when npm run build, and the generated file will be much larger. So I think it’s better to delete it.
web front-end development, Basic programming video)
The above is the detailed content of What should I do if the Vue project loads slowly for the first time? Two solutions. For more information, please follow other related articles on the PHP Chinese website!
总结分享几个 VueUse 最佳组合，快来收藏使用吧！Jul 20, 2022 pm 08:40 PMVueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合，希望对大家有所帮助！
聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PMVue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。
Github 上 8 个不可错过的 Vue 项目，快来收藏！！Jun 17, 2022 am 10:37 AM本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目，都是非常棒的项目，希望当中有您想要收藏的那一个。
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何使用VueRouter4.x？快速上手指南Jul 13, 2022 pm 08:11 PM如何使用VueRouter4.x？下面本篇文章就来给大家分享快速上手教程，介绍一下10分钟快速上手VueRouter4.x的方法，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
