vue-cli3打包优化(一秒读懂)

本文介绍了在Vue CLI3项目中进行性能优化的方法,包括CDN配置及其对HTML文件的影响,旨在帮助开发者快速理解并实践打包优化。
摘要由CSDN通过智能技术生成

在开发过程中vue项目打包是需要做一些性能优化的,这里写了关于我知道的要做的优化的部分,废话不多说直接上代码了,仅供参考 欢迎提出意见

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 标记是否是生产环境
const isPruction = process.env.NODE_ENV === "production" 
const devNeedCdn = false // 标记本地是否需要cdn引入
// cdn配置
// CDN的本质上是将媒体资源,动静态图片(Flash),HTML,CSS,JS等等内容缓存到距离你更近的IDC,
// 从而让用户进行共享资源,实现缩减站点间的响应时间等等需求,而网游加速器的本质则是通过建立高带宽机房,
// 架设多节点服务器来为用户进行加速。我们可以将一些大体积的模块,让cdn帮我们提供相应的资源,
// 这样就可以缓解我们自己的服务器的压力,同时提供更快更好的资源响应

const cdn = {
    // 模块名称和作用域名(对应的是window里面的全局变量名)
    external: {
        vuex: 'Vuex',
        'vue-router': 'VueRouter'
    },
    //cdn的css链接
    css: [],
    //cdn的js连接 这里的资源地址请根据自己的连接
    js: [
        'https://cdn.staticfile.org/vuex/3.0.2/vuex.min.js', 
        'https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js'
    ]
}
mo
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值