vue项目打包部署(减小体积运行速度快!!!)

本文介绍了如何通过CDN加速和调整Vue项目打包设置,以减少项目体积并提升运行速度。首先,通过创建不同的环境文件区分生产环境和开发环境,然后在vue.config.js中配置CDN引用,并删除项目内不再需要的包。最后,通过cdn.jsdelivr.net引入所需文件,实现更快的加载速度和更小的体积。
摘要由CSDN通过智能技术生成

vue项目打包部署

前些时候写了一个vue商城的小项目可是呢他的体积太大了在运行上线模式的时候光运行就花了好长时间,原因是因为项目的体积太大了所以运行起来就耗费时间。
所谓时间就是金钱,时间就是生命啊。所以我们不能浪费金钱和生命。那么就通过分散资源来减小项目体积吧。

一.使用CDN的方法

第一步就是分开生产环境和开发环境

1.1因为main.js是打包文件所以运行npm run build生产环境不太方便。所以我们要在src目录项新建两个js文件。
把main.js分别拷贝到这两个文件中去,然后删除main.js
在这里插入图片描述
1.2现在这两个文件的内容是一样的,要区分开生产环境文件和开发环境文件。
当我想要运行npm run serve 的时候是运行dev_env.js
而我运行npm run buil的时候运行prod_env.js
所以要在项目目录项新建一个vue.config.js文件加入以下代码

module.exports={
   
    chainWebpack:config=>{
   
        config.when(process.env.NODE_ENV === 'production',config=>{
   
            config.entry('app').clear()
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值