vueconfigjs配置打包不压缩,vueconfig.js配置文件
这篇文章主要介绍了vue。配置。射流研究…打包优化配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
百度上的资料五花八门让人眼花缭乱，别急，这时候我替你亲身经历了，有需要的可以参考下，先上效果图，以免你们以为我吹牛逼，嘻嘻
优化方向
1.图片资源压缩
2.将productionSourceMap设为假的，地图不进行生成
3.cdn配置（可选)
4.代码压缩
5.公共代码抽离（个人感觉没啥用)
未优化之前的//感觉太大了抬它
优化之后的
废话不多说了，上代码是重点
这些是必要的下载
/*cnpm安装映像-网络包-加载器-保存-开发
cnpm安装压缩-网络包-插件-保存-开发
cnpm安装uglifyjs-web pack-插件-保存-开发*/
const path=require( path )；
//gzip压缩
const compression plugin=require( compression-web pack-plugin )
//监控日志
const SentryCliPlugin=require( @ sentry/web pack-plugin )；
//代码压缩
const UglifyJsPlugin=require( uglifyjs-web pack-plugin )
常数版本=新日期()。getTime()；
函数解析（目录){
返回path.join(__dirname，dir)
}
const cdn={
js: [
//vue必须在第一个
https://cdn.bootcss.com/vue/2.6.10/vue.min.js，
https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js，
https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js，
https://cdn.bootcss.com/axios/0.18.1/axios.min.js，
https://cdn.bootcss.com/qs/6.5.1/qs.min.js，
https://cdn。jsdelivr。net/NPM/vant @ 2。5 .4/lib/vant。量滴js
]
}
模块。导出={
//部署应用包时的基本统一资源定位器
公共路径：""。/,
//当运行vue-CLI-服务构建时生成的生产环境构建文件的目录
输出目录： wx_vue ，
//放置生成的静态资源(js、css、img、字体)的（相对于输出目录的)目录
资产目录：。/版本/资产，
//eslint-loader是否在保存的时候检查安装@vue/cli-plugin-eslint有效
lintOnSave:假的，
//是否使用包含运行时编译器的某视频剪辑软件构建版本。设置真实的后你就可以在使用模板
runtimeCompiler: true
//生产环境是否生成源地图文件源地图的详解请看末尾
productionSourceMap: false，
/** 去掉哈希*/
filenameHashing: true，
//页数：{
//索引：{
//entry: src/main.js ，
//template: public/index.html ，
//文件名：“index.html”
//}
//},
configureWebpack: config={
如果(过程。环境。node _ ENV===生产){
//为生产环境修改配置.
config.mode=生产
配置。dev tool= source-map ；
}否则{
//为开发环境修改配置.
config.mode=开发
}
/** 删除懒加载模块的预取预载，降低带宽压力（使用在移动端) */
配置。插件。删除(“预取”).删除("预加载")
配置。优化。最小化(真)
//gzip压缩
//config。插件(“压缩插件”).使用(压缩插件).点击(()=[
//{
//文件名："[路径]"。gz[查询],
//算法： gzip ，
//测试：/\。js$\html$\css/，//匹配文件名
//阈值：10240,//超过10k进行压缩
//minRatio: 0.8，//只有压缩率小于这个值的资源才会被处理
//deleteOriginalAssets: false //是否删除源文件
//}
//])
插件.推送(
新压缩插件({
文件名：[路径]。gz[查询],
算法： gzip ，
测试：/\。js$\html$\css/，
门槛：10240,//只有大小大于该值的资源会被处理10240
最小比率：0.8,//只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false //删除原文件
})
)
//公共代码抽离
配置优化={
拆分块
缓存组：{
供应商：{
组块："全部",
test: /node_modules/，
名称：供应商，
minChunks: 1，
maxInitialRequests: 5，
minSize: 0，
优先级：100
},
常见：{
组块："全部",
test: /[\\/]src[\\/]js[\\/]/，
名称：常见，
minChunks: 2，
maxInitialRequests: 5，
minSize: 0，
优先级：60
},
样式：{
名称："样式",
测试：/\。ss美元/，
组块："全部",
强制：真
},
runtimeChunk: {
名称："清单"
}
}
}
}
},
configureWebpack: {
解决：{
别名：{
vue$: vue/dist/vue.esm.js ，
@: resolve(src )，
@c: path.resolve(__dirname， ./src/components )，
assets: path.resolve(__dirname，./src/assets’)
}
},
外部：{
vue: Vue ，
vuex: Vuex ，
“vue路由器”:“vue路由器",
axios: axios ，
“Qs”:“Qs”，
vant: Vant
//微信-js-sdk“:”微信-js-sdk ，
//clipboard:clipboard ，
//qrcodejs2:qrcodejs2 ，
//js-md5:js-md5
},
优化：{
最小化：[
新的UglifyJsPlugin({
丑陋选项：{
输出：{ //删除注释
评论：错误
},
//生产环境自动删除安慰
压缩：{
//警告：false，//若打包错误，则注释这行
drop_debugger: true，//清除调试器语句
drop_console: true，//清除安慰语句
pure_funcs: [console.log]
}
},
源地图：假的，
平行：正确
})
]
}
},
//css相关配置
css: {
摘录：假的，
loaderOptions: {
手写笔：{
解析 url: true，
导入":[]"
},
//less: {
////`全局变量定义全局对象，可加入全局变量
//全局变量：{
//主要：" # 333 "
//}
//}
},
requireModuleExtension: true，
},
//webpack-dev-server相关配置
devServer: { //设置代理
hot: true，//热加载
主机："本地主机“，//ip地址
端口：8085,//端口
https: false，//false关闭https，真为开启
open: true，//自动打开浏览器
代理：{ //配置多个跨域
/api: { //本地
//目标： http://172。168 .10 .150:81/ysol _ wx ，
//目标： http://Yishan line . cn/ysol _ wx ，
目标： https://yishanol.cn/ysol_wx ，
ws:没错，
更改来源：真的，
路径重写：{
^/api:
}
}
}
},
插件选项：{ //第三方插件配置
//.
},
chainWebpack: config={
//============压缩图片开始============
配置模块。规则("图像")。使用( image-webpack-loader )。加载器(“image-webpack-loader”)。选项({
//{ bypassOnDebug: true }
mozjpeg: { progressive: true，quality: 65 }，压缩联合图象专家组图像
optipng: { enabled: false }，//压缩png图像
pngquant: {质量：[0.65,0.9],速度：4 },//压缩PNG图像
gifsicle: { interlaced: false }，//压缩挽救（saving的简写）图像
//webp: {质量：75 }
})。结束()
//config.module.rules.push({
//测试：/\。(pngjpe？ggifsvg)(\？*)?$/,
//使用：[{
//loader: image-webpack-loader ，
//选项：{bypassOnDebug: true}
//}]
//})
//============压缩图片end============
插件( html ).tap(args={
参数[0]。cdn=cdn
返回参数
})
/* 添加分析工具*/
如果(过程。环境。node _ ENV===生产){
如果(过程。环境。NPM _配置_报告){
配置。插件(“webpack-bundle-analyzer”)。使用(require( web pack-bundle-analyzer )。BundleAnalyzerPlugin)。end()；
config.plugins.delete(预取)
}
}
if(process . env . umi _ env== production ){//仅当使用prod时，才会上传源映射。如果不判断，项目运行时也会上传包。如果在线日志输出不需要它，可以将其删除。
config.plugin(sentry )。使用(SentryCliPlugin，[{
忽略：[node_modules]，
包含：/\。用于上传dist文件的map$/，//js
配置文件： sentry.properties ，//配置文件的地址，这个必须有。这里踩坑了，忘记写了，导致sourcemap无法上传。
Release: release@0.0.1 ，//版本号，自己定义的变量。完整的版本号必须在项目中对应。
deleteAfterCompile: true，
URL前缀： ~/wx _ vue//cdnjs的代码路径前缀
}])
}
}
}
与vue2相比，E3Vue.config.js更加简洁。需要什么操作？你得自己配置，增加动手能力。除了一些语法上的变化，在一些写法上是差不多的！优化还有很长的路要走，下次会更多。
关于vue.config.js包优化配置的这篇文章就到这里了。更多关于vue.config.js包优化配置的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。