当前位置：网站首页 > 技术文章 > 正文

只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内

网站名称：只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
网站分类：技术文章
收录时间：2025-08-19 14:42
网站地址：

“只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内” 网站介绍

前言：

基于Vuecli搭建的vue项目简单快捷，易于开发。在node.js的加持下你可以更快的引入万千JavaScript开发库，仅仅依靠前端就可以实现以前使用后端才能实现的功能，如通过axios便可以快捷的与后端进行数据交互等。

但是vuecli搭建的项目也处在一些不足，在安照vue官方进行开发时往往存在引入JavaScript库较多，导致项目过大访问时花费的时间较长，特别在服务器带宽较低时就会存在访问时间较长，乃至30s甚至1分钟以上也是存在的。例如euiadmin的服务器带宽是1mbps的在没有优化前，用Chrome浏览器访问时间常常为35s以上，经过优化现在访问时间控制在3s左右。

前期准备：

在项目根目录下创建vue.config.js，这是前期必须要准备的，如果不理解可以前往euiadmin.com官网下载源码进行查看。

优化方法：

1、路由懒加载

在router/index.js中采用如下书写形式，采用resolve进行加载。

{

path: '/module/animate',

name: 'animate',

component: resolve => require(['@/views/module/Animate.vue'], resolve),

meta: {

title: 'Eui动画',

login_state: true,

vist_label: ['super_admin', 'admin']

2、子组件懒加载

示例JavaScript代码：

export default {

components: {

HomeSpace:resolve=>{require(['@/components/home/HomeSpace'],resolve)},

};

</script>

注意：

使用子组件懒加载在进入首页时会较快，但是进入相应的子组件时特别是富文本等使用JavaScript库的子组件时加载时间可能较长，如果您不在乎首页加载时间可以不使用懒加载。

3、CDN引用加载，减少打包体积加快访问速度

（1）在public/index.html中引用需要引用的内容（以EuiAdmin作为参考）。

<head>

</head>

（2）在项目根目录vue.config.js中写下如下内容。

（1）移除 prefetch 插件，不移除会在访问时加载所有项目内容。

参考代码：

chainWebpack: config => {

config.plugins.delete('prefetch')

（2）去除指定的JavaScript库不打包。

configureWebpack: { //移除已从cdn引入的组件，不打包以下命名的内容

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'element-ui': 'ELEMENT',

'echarts': 'echarts',

'VueCookies': 'VueCookies',

完整的vue.config.js内容

// Vue.config.js 配置选项

module.exports = {

publicPath: "./",

// 构建时的输出目录

outputDir: "dist",

// 放置静态资源的目录

assetsDir: "static",

transpileDependencies: [ /* string or regex */ ],

// 是否为生产环境构建生成 source map？

productionSourceMap: false,

devServer: {

open: true,

host: 'localhost',

port: 8080,

https: false,

//以上的ip和端口是我们本机的;下面为需要跨域的

proxy: { //配置跨域

'/api': {

target: 'http://localhost', //这里后台的地址模拟的;应该填写你们真实的后台接口

ws: true,

changOrigin: true, //允许跨域

pathRewrite: {

'^/api': '' //请求的时候使用这个api就可以

}

configureWebpack: { //移除已从cdn引入的组件，不打包以下命名的内容

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'element-ui': 'ELEMENT',

'echarts': 'echarts',

'VueCookies': 'VueCookies',

chainWebpack: config => {

// 移除 prefetch 插件

config.plugins.delete('prefetch')

}

注意事项：

1、在使用子组件懒加载时需要在整个项目中都要使用，不然会导致加载时间过长。

2、 Cdn加载时一定要配合vue.config.js二者相互使用否则不生效。

结语：

具体的代码你可以前往euiadmin.com下载源码进行参考，如果你要运行euiamdin项目那么你需要在自己电脑搭建运行环境（node.js+vuecli）。

如果您喜欢可以"关注、评论和收藏"哦。

axios.min.js

上一篇：SpringBoot 接口加解密全过程详解
下一篇：1，vue播放视频之—引入.m3u8后缀的hsl视频流

只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内

“只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内” 网站介绍

更多相关网站