整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法

更新時(shí)間：2023年02月17日 10:11:15 作者：牛先森家的牛奶

這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

整理項(xiàng)目中vue.config.js打包優(yōu)化

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

安裝：

npm intall webpack-bundle-analyzer –save-dev

使用：

// 1、第一種 運(yùn)行時(shí)可以查看
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')
			}
		}
	},
}

運(yùn)行：

npm run build --report

// 不同環(huán)境
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的數(shù)據(jù)壓縮
					minRatio: 0.8, // 壓縮率小于0.8才會壓縮
					deleteOriginalAssets: true // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
				}));
		}
	},
}

配置uglifyjs-webpack-plugin 壓縮js代碼

安裝：

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

使用：

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
	configureWebpack: {
		// 優(yōu)化
		optimization: {
			minimizer: [
				new UglifyJsPlugin({
					uglifyOptions: {
						output: { // 刪除注釋
							comments: false
						},
						//生產(chǎn)環(huán)境自動(dòng)刪除console
						compress: {
							//warnings: false, // 若打包錯(cuò)誤，則注釋這行
							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目錄，這些圖標(biāo)已用 svg-sprite-loader 處理，打包成 svg-sprite 了
			.end()
			.use('url-loader')
			.tap(options => ({
				limit: 10240, // 稍微改大了點(diǎn)
				fallback: {
					loader: require.resolve('file-loader'),
					options: {
						// 在這里修改file-loader的配置
						// 直接把outputPath的目錄加上，雖然語義沒分開清晰但比較簡潔
						name: 'static/img/[name].[hash:8].[ext]',
						esModule: false, //低版本默認(rèn)為false，高版本默認(rèn)為true 這里為6.2.0為高本版本所以要手動(dòng)設(shè)置為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') // 表示先執(zhí)行配置在下面那個(gè)loader，即image-webpack-loader
	},
}

配置 css

參考文章：

vue-cli4之vue.config.js打包優(yōu)化
 vue-cli3.0配置 webpack-bundle-analyzer 插件
 vue-cliI 中CSS 相關(guān)配置項(xiàng)

到此這篇關(guān)于整理項(xiàng)目中vue.config.js打包優(yōu)化的文章就介紹到這了,更多相關(guān)vue.config.js打包優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: