项目优化的方式

文章介绍了如何通过nprogress添加进度条效果,解决eslint中的console警告,在vue.config.js中自定义webpack配置,如修改入口和出口。此外,讨论了通过CDN优化ElementUI的打包和利用extemals避免大文件打包,以及实现路由懒加载来提升性能。在不同环境下,如开发和发布模式,设置自定义首页内容和标题显示。
摘要由CSDN通过智能技术生成

1、通过nprogress添加进度条效果

 

 2、解决eslint中console的问题

 但是这种情况会让在开发阶段也会失去console,下面的方式更加的合理

3、通过vue.config.js修改webpack的默认 

 首先为开发模式指定不同的入口和出口

 演示如何使用:

 

4、通过extemals加载外部CDN资源

由于import引入的包,会打包到一个文件夹内,所以会导致文件依赖项过大。

如果把这些可以拆除去的依赖项声明到了 extemals节点中,那么在打包期间webpack会先检查我们有没有在extemals下声明第三方的依赖包,如果有,webpack就不会把依赖包打包到里面去,而是在用到这个依赖包的时候会直接去window全局对象身上去找来进行使用。

 

 

 

 

 5、 通过CDN优化ElementUI的打包

 

 

 6、自定义首页内容

开发环境和发布模式两种环境下看到的标题是不一样的。

 

 

  

 7、实现路由懒加载

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值