vue项目优化,缩小打包体积,router优化 gzip压缩


在这里插入图片描述

config.when( process.env.NODE_ENV === ‘production’, config => {
config.entry('app').clear()/.add('./src/main-prod.js)
})

1 when () 判断处于什么开发模式
2 process.env.NODE_ENV 获取当前开发模式

配置cdn资源 减小打包体积

在这里插入图片描述

一. 配置不需要打包依赖

config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'vant': 'vant',
      'echarts': 'echarts',
      'videojs': 'videojs',
      // 'qq': 'qq',
      // 'wx': 'wx',
      // 'callapp-lib': 'CallApp',
      // 'lodash': '_',
      // 'element-ui': 'ELEMENT',
      // 'xlsx': 'XLSX'
    }

二. 删除main.js 中导入的js、css 文件 在index.html中 通过cdn方式引入对应css、js文件

ElementuUI 优化

在这里插入图片描述

router 优化–懒加载

在这里插入图片描述

一. 在babel.config.js 中声明路由懒加载
在这里插入图片描述

二. 将组件导入模式改为
Home => 导入后的组件名
Home_login => 放的位置
./components/Home.vue => 导入组件路径

const Home = () => import(/* webpackChunkName: "Home_login"*/ './components/Home.vue')

在这里插入图片描述

项目上线配置

在这里插入图片描述

gzip 压缩

在这里插入图片描述

管理服务器

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@引力波

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值