项目打包后加载时间及大小

1.下图为vender.js加载时间，会发现vebder.js 大小将近2M，加载时间蓝条很长

解决方式

我同时用了两种解决方式，来减少vender.js的大小

1.路由懒加载

vue-router路由懒加载（解决vue项目首次加载慢）也叫延迟加载，即在需要的时候进行加载，随用随载。简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

解决方式

在路由设置文件router.js 文件中将import 改成require
原有文件

 import Vue from 'vue'import Router from 'vue-router'//全局引入  import Start from '@/views/start/index.vue'export default new VueRouter({routes: [{path: '/start',name: 'Start',component: Start,},}]

改成以下即可

 import Vue from 'vue'import Router from 'vue-router'//全局引入  //import Start from '@/views/start/index.vue'
export default new VueRouter({routes: [{path: '/start',name: 'Start',// component: Start,//按需引入component: resolve => require(['@/views/start/index.vue'], resolve),},}]

2.将外部资源通过CDN引入，仅针对vue3.0

通过资源的方式引入，而不是在编译的时候，编译到vender.js 文件中

步骤1:在index.html 中引入CDN资源

这里要注意，在vue3.0中，要想引入CDN资源，需进入根目录/punlic/index.html 文件中之后在 < head></ head>标签中进行引入,引入顺序，vue应该放在最前面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 全局引入 所需外部链接 --><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script><script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script><title>项目标题</title>
</head>

步骤2：在vue.config.js 中进行配置

这里要注意vue3.0 是没有这个文件的，
1.所以我们需要在根目录手动创建vue.config.js文件。
2.在configureWebpack：中通过externals进行配置，格式为‘XXX’：‘SSS’ 这里 XXX 为引入资源的名称，’SSS‘表示模块提供给外部引用的名称。这里要注意’SSS‘ 是固定格式不可自定义，否则报错 SSS：undefined…
4.配置完毕以后，一定要先重新run 项目，否则会报错，因为vue.config.js并非实时加载。

module.exports = {publicPath: "./", // 构建好的文件输出到哪里outputDir: "dist", lintOnSave: true, runtimeCompiler: false, /transpileDependencies: [], productionSourceMap: false, chainWebpack: () => {},configureWebpack:{externals: {'vue':'Vue','vue-router':'VueRouter','axios':'axios','element-ui':'Element',}},
};

使用，在哪里需要的话直接使用就好，无需导入。


import App from './App.vue'
import router from './router'
//*********************直接在这里使用Vue 即可**************/
Vue.config.productionTip = false
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
require('echarts-wordcloud')//页面跳转以后始终在页面顶部
router.afterEach(() => {window.scrollTo(0, 0)
})

vue3.0项目打包后，由于vender.js 文件过大引起的首页加载时间缓慢的解决方式相关推荐

【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
解决vue项目打包后文件过大导致首屏加载30s+的问题
依赖 vue v2.6 axios+tailwindcss+element-ui+... 文件打包情况 File Size Gzippeddist/js/chunk-vendors.fb40d429. ...
Vue3.0 项目打包，启动
1.打包 1.使用 vue ui打包(选择任务-选择build-选择运行) 2.使用命令打包(vite build),本项目使用vite进行打包 2.生成打包文件 1.项目中会出现一个dist文件 3 ...
Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画
最终实现效果可以实现提示文字和背景颜色的自定义 xzw-loading-text='别急嘛~' // 默认为加载中 xzw-loading-background='rgba(0, 0, 0, .4) ...
vue项目加载不出图片解决方式
vue项目中图片加载不出来,像下面这样,图片地址是有的. 解决方案: 1.在html5或jsp的header加入meta. 找到index.html文件.在head中添加如下代码. <meta ...
手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错: 原代码如下: 查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题, ...
Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
vue-cli3项目优化首页加载过慢的一些心得
博主最近发现vue-cli3项目做完后,点击首页加载时间好久啊,一般都要3-5s.这样的加载时间博主自己都受不了,所以就有了这个随笔,将自己的一些研究心得分享给大家. 首先推荐大家下载一个webpac ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...

vue3.0项目打包后，由于vender.js 文件过大引起的首页加载时间缓慢的解决方式

项目打包后加载时间及大小

解决方式

1.路由懒加载

解决方式

2.将外部资源通过CDN引入，仅针对vue3.0

步骤1:在index.html 中引入CDN资源

步骤2：在vue.config.js 中进行配置

vue3.0项目打包后，由于vender.js 文件过大引起的首页加载时间缓慢的解决方式相关推荐

最新文章

热门文章