位置: IT常识 - 正文

vue项目打包优化及配置vue.config.js文件(实测有用)(vue打包速度优化)

编辑:rootadmin
vue项目打包优化及配置vue.config.js文件(实测有用) 首先我们需要在根目录里创建一个vue.config.js

推荐整理分享vue项目打包优化及配置vue.config.js文件(实测有用)(vue打包速度优化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目打包优化方案,vue项目打包优化方案,vue项目打包运行,vuecli打包优化,vue3打包优化,vue webpack打包优化,vue项目打包优化方案,vue3打包优化,内容如对您有帮助,希望把文章链接给更多的朋友!

首先在文件中先写入//打包配置文件module.exports = { assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 publicPath: './', // 静态资源路径(默认/,如果不改打包后会白屏) productionSourceMap: false, //不输出map文件};之后再使用CDN 加速优化(此代码在module.exports对象外面)cdn加速可以去官网找到相应插件的路径 BootCDN官网// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称) externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT' //这里需要注意下 }, // cdn的css链接 css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css' //引入element ui css文件 ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js' ]}vue项目打包优化及配置vue.config.js文件(实测有用)(vue打包速度优化)

在module.exports对象里写入

chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时,才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ },对图片文件进行压缩

下载依赖 这里如果用npm 可能会下载速度慢安装失败,建议使用cnpm

cnpm install image-webpack-loader --save-dev

之后继续在 chainWebpack里面新增以下代码

config.plugins.delete('prefetch') config.module.rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true })对代码压缩

先下载依赖 也建议使用cnpm

cnpm install uglifyjs-webpack-plugin --save-dev

在module.exports对象里写入

configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) },对公共代码抽离

在configureWebpack里继续写入

// 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } }最后整合起来vue.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称) externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios' }, // cdn的css链接 css: [ ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js' ]}//打包配置文件module.exports = { assetsDir: 'static', publicPath: './', productionSourceMap: false, //不输出map文件 chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时,才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ // 在chainWebpack中新增以下代码 config.plugins.delete('prefetch') config.module.rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) }, configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) // 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } } }, devServer: { proxy: { '/api': { target: '线上接口地址', ws: true, changeOrigin: true, pathRewrite: { '^/api': '/', // 根据之前vuejs的配置,用来拿掉URL上的(/api),但是暂时没有什么效果 }, }, }, },};最后我的vue项目由原来的12M减少到2M,启动也是成功
本文链接地址:https://www.jiuchutong.com/zhishi/278470.html 转载请保留说明!

上一篇:阻止更改系统主题内容(阻止电脑系统更新设置在哪)

下一篇:人工智能导论(第四版)王万良编著课后习题答案(人工智能导论报告)

  • 如何确定关联方及关联关系
  • 工商年报的纳税总额是什么
  • 没达到起征点需要申报吗
  • 固定资产清理结转到什么科目
  • 不动产租赁可以加计扣除吗
  • 印花税不计入应交税科目吗?
  • 一般纳税人技术服务免税发票怎么开
  • 广告公司对外捐赠的会计处理怎么做?
  • 收到的货品与实体不符
  • 固定资产所取得的成本
  • 实收资本退还
  • 没有资质的建筑公司怎样接工程
  • 2018年高新技术企业所得税
  • 职工工资个人所得税缴纳标准
  • 进项税的现金流怎么填
  • 开通税种需要带发票吗
  • 消费型增值税的特点的是( )
  • 销售费用办公费用
  • 试用期内进一步使用
  • 培训费没有发票怎么办
  • 政府补贴的银行卡注销了会怎么样
  • 付企业网银年服费怎么付
  • 增值税销项税额抵减账务处理
  • 技术服务费增值税可以抵扣吗
  • mac如何登陆两个微信
  • 小规模本月应交增值税次月交可以不计提吗
  • 结转法定盈余公积会计分录怎么写
  • 从税法角度看,商誉计税基础
  • php多线程怎么实现
  • 工商企业年报网上申报流程
  • 购销合同违约罚款属什么科目
  • 免征个人所得税33种情形
  • 企业所得税年报截止日期2023
  • auto.js 逆向
  • 不需要支付的应付款情况说明
  • elementui动态表单数据回显
  • php魔术方法功能与用法实例分析
  • php支付接口对接教程
  • laravel中间件是什么意思
  • 增值税 附加税
  • 新会计准则增加了哪些科目
  • 建筑劳务税率是13还是6
  • 停车费报销怎么说委婉
  • python 函数的返回值
  • 事业单位成本核算具体指引—公立医院
  • 软件企业研发费用
  • 金税三期业务操作手册
  • 固定资产入账及计提折旧
  • 无形资产摊销账面价值
  • 差旅费包括哪些费用
  • 实物投资的会计科目
  • 年末待处理财产损益有余额怎么办
  • 老办法退休金如何计算
  • MySQL 5.5.x my.cnf参数配置优化详解
  • 如何查看solaris版本
  • centos怎么查看文件
  • 浏览器登录淘宝安全吗
  • linux文件与目录
  • linux环境什么意思
  • 富泽园假日酒店
  • xp系统的设置在哪里
  • 更换主板也不用换硅脂吗
  • win10预览版怎么安装
  • Linux基本命令使用
  • 怎么给异地的人订外卖
  • 微软 系统设计
  • js导出excel文件前端插件
  • pythonlist切片
  • pycharm中文教程
  • linux编写一个脚本
  • 利用Python中的turtle绘制乡村振兴
  • unity与android交互详细
  • js弹出小窗口
  • js的scrolltop
  • python中csv怎么用
  • javascript怎么用
  • 云南省税务局app缴费
  • 中粮副总裁是什么级别
  • 珠宝消费税怎么计算出来的
  • 注册管理税务师和注册税务师的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设