文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

整理项目中vue.config.js打包优化配置方法

2023-02-17 12:02

关注

整理项目中vue.config.js打包优化

配置 webpack-bundle-analyzer 插件查看文件大小

安装:

npm intall webpack-bundle-analyzer –save-dev

使用:

// 1、第一种 运行时可以查看
module.exports = {
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

// 2、第二种 打包完可以查看
module.exports = {
	// 配置
	chainWebpack: config => {
			// 添加可视化工具 - 查看打包后的文件大小!
			if (process.env.NODE_ENV === 'production') {
			if (process.env.npm_config_report) {
				config
					.plugin('webpack-bundle-analyzer')
					.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
					.end();
				config.plugins.delete('prefetch')
			}
		}
	},
}

运行:

npm run build --report

// 不同环境
npm run build:test --report
npm run build:prod --report

效果:

配置compression-webpack-plugin 用gzip压缩打包的文件大小

安装:

npm i compression-webpack-plugin@5.0.1  // 版本问题注意

使用

var path = require('path')
var webpack = require('webpack')
// 压缩
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
function resolve (dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	chainWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			config.plugin('compressionPlugin')
				.use(new CompressionPlugin({
					filename: '[path].gz[query]',
					algorithm: 'gzip', // 使用gzip压缩
					test: productionGzipExtensions, // 匹配文件名
					threshold: 10240, // 对超过10k的数据压缩
					minRatio: 0.8, // 压缩率小于0.8才会压缩
					deleteOriginalAssets: true // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
				}));
		}
	},
}

配置uglifyjs-webpack-plugin 压缩js代码

安装:

npm i uglifyjs-webpack-plugin --save-dev

使用:


// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
	configureWebpack: {
		// 优化
		optimization: {
			minimizer: [
				new UglifyJsPlugin({
					uglifyOptions: {
						output: { // 删除注释
							comments: false
						},
						//生产环境自动删除console
						compress: {
							//warnings: false, // 若打包错误,则注释这行
							drop_debugger: true,  //清除 debugger 语句
							drop_console: true,   //清除console语句
							pure_funcs: ['console.log']
						}
					},
					sourceMap: false,
					parallel: true
				})
			]
		},
	},
}

配置 image-webpack-loader 图片的压缩

安装:

npm i image-webpack-loader -D

使用:

module.exports = {
	chainWebpack: config => {
		// 图片压缩
		config.module
			.rule('images')
			.exclude.add(resolve('src/assets/icons')) // 排除icons目录,这些图标已用 svg-sprite-loader 处理,打包成 svg-sprite 了
			.end()
			.use('url-loader')
			.tap(options => ({
				limit: 10240, // 稍微改大了点
				fallback: {
					loader: require.resolve('file-loader'),
					options: {
						// 在这里修改file-loader的配置
						// 直接把outputPath的目录加上,虽然语义没分开清晰但比较简洁
						name: 'static/img/[name].[hash:8].[ext]',
						esModule: false, //低版本默认为false,高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false
					}
				}
			}))
			.end()
			.use('image-webpack-loader')
			.loader('image-webpack-loader')
			.options({
				mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
				optipng: { enabled: true }, // 压缩PNG图像
				pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
				gifsicle: { interlaced: false } // 压缩GIF图像
			})
			.end()
			.enforce('post') // 表示先执行配置在下面那个loader,即image-webpack-loader
	},
}

配置 css

参考文章:

vue-cli4之vue.config.js打包优化
vue-cli3.0配置 webpack-bundle-analyzer 插件
vue-cliI 中CSS 相关配置项

到此这篇关于整理项目中vue.config.js打包优化的文章就介绍到这了,更多相关vue.config.js打包优化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯