vue-cli4之vue.config.js打包优化

14 篇文章 0 订阅

vue之cli之中的vue.config.js配置文件

参考于

publicPath - 打包后 访问基础路径

  • 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: “xzl”
    • xzl 就是项目目录路径
  • 效果:
    • 打包后访问的路径 与 运行项目的路径
    • 在这里插入图片描述
module.exports = {
	publicPath: "xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "xzl"
}

outputDir - 打包后输入的文件夹

  • outputDir: “xzl”, // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
  • 效果
    • 在这里插入图片描述
module.exports = {
	publicPath: "/xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "xzl"
	outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
}

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

  • 注意点:npm i compression-webpack-plugin@5.0.1 版本问题注意
  • 效果:
    • 没有使用compression-webpack-plugin前后效果
      • 在这里插入图片描述
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后还可以加载到原始资源文件)
				}));
		}
	},
}

配置别名

  • 再vue组件时候使用的时候
    • import Pagination from "@com/content/Pagination.vue";
var path = require('path')
var webpack = require('webpack')
function resolve (dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	// 配置别名
	chainWebpack: config => {
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@com', resolve('src/components'))
			.set('@ass', resolve('src/assets'));
	}
}

压缩js代码 - uglifyjs-webpack-plugin (去log等)

  • 下载:yarn add uglifyjs-webpack-plugin --save-dev
  • 效果:
    • 在这里插入图片描述
var path = require('path')
var webpack = require('webpack')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
	return path.join(__dirname, dir)
}
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

  • 下载:yarn add image-webpack-loader@8.0.1 -D || npm install --save-dev image-webpack-loader
  • 官网:https://www.npmjs.com/package/image-webpack-loader
  • 效果:
    • 在这里插入图片描述
var path = require('path')
var webpack = require('webpack')
function resolve (dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	publicPath: "/xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "/xzl"
	outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl

	// 配置别名
	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
	},
}

productionSourceMap: false,

  • 在设置了vue.config.js之后,就不会生成map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题,并且不想被看到源码,就把productionSourceMap 置为false,既可以减少包大小,也可以加密源码
    • source map 直译过来就是资源地图。所以,source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
module.exports = {
	publicPath: "/xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "/xzl"
	outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
	productionSourceMap: false,
}

打包后可视化文件大小的显示

  • 下载: yarn add webpack-bundle-analyzer -D
  • 注意点:在jenkins(自动化部署)打包时把该配置去掉,否则打包不成功
  • 运行:npm run build --report
  • 结果:Webpack Bundle Analyzer is started at http://127.0.0.1:8888 等!
    • http://127.0.0.1:8888使用这个路径即可访问以下效果
      在这里插入图片描述
var path = require('path')
var webpack = require('webpack')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	publicPath: "/xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "/xzl"
	outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
	productionSourceMap: false,

	// 配置别名
	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')
			}
		}
	},
}

css相关配置

requireModuleExtension (默认: true)

  • 作用: 默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
  • 注意点:配置了loaderOptions.css, 需要再一次强调一下 requireModuleExtension的值为true
  • 其他配置:链接
module.exports = {
	// css相关配置
	css: {
		// 默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块(requireModuleExtension: false与loaderOptions配合使用会失效,因此要为true )
		// 因为要配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值,我们也需要指出
		requireModuleExtension: true,
		loaderOptions: {
			css: {
				modules: {
					// 定义模块化类名! hash值模式
					localIdentName: '[local]_[hash:base64:8]'
				}
			}
		}
	},
}

css.extract

  • 是否使用css分离插件 ExtractTextPlugin 简单来说就是为true时,打包会把css单独分文件出来打包,否则直接注入js之中打包
module.exports = {
	// css相关配置
	css: {
	  extract: false,
	}
}

css.sourceMap

  • 就是打包的时候会生成source map(资源联络匹配),精准找到css样式报错位置!
module.exports = {
	// css相关配置
	css: {
	  sourceMap: true,
	}
}

服务器设置

  • 热更新、自动打开浏览器、端口号配置、服务器代理
  • 官网:https://webpack.js.org/configuration/dev-server/
    在这里插入图片描述
module.exports = {
	// 服务器设置
	devServer: {
		port: 9999, // 端口
		host: '0.0.0.0', // 允许外部ip访问 || localhost(本地)
		open: true, // 自动打开浏览器
		inline: true,// 用于设置代码保存时是否自动刷新页面
		hot: true, //热加载 -> 用于设置代码保存时是否进行热更新 (局部刷新,不刷新整个页面)
		// openPage: '/#/table',//运行项目后 自动打开的页面 hash的时候 需要使用/#/XX -> 非hash时则不用(/table是路由http://localhost:9999/xzl/#/table)
		// https: true, // 用于设置是否启用https
		compress: true, // gzip 压缩 用于减少服务器向前端传输的数据量,提高浏览的速度。

		proxy: {	 //配置多个跨域
			'/api': { //本地 这边的/api是配置默认请求的api ,这还需要在axios实例对象中设置
				// target: process.env.VUE_APP_BASEURL,//服务器代理的baseUrl
				//target: 'http://10.0.124.20:8090/xzl',
				//target: 'http://10.0.124.20:8030/xzl',
				target: 'http://10.0.124.20:8080/xzl',
				ws: true, // 是否代理websocket
				changeOrigin: true,//将主机头的来源更改为目标URL,也就是是否允许跨域
				pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
					'^/api': ''
				}
			}
		}
	}
}

完整的vue.config.js

var path = require('path')
var webpack = require('webpack')
// 文件压缩
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 引入css - rem的配置
// const px2rem = require('postcss-px2rem')
// const postcss = px2rem({
// 	remUnit: 16   //基准大小 baseSize,需要和rem.js中相同
// })
function resolve (dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	publicPath: "/xzl", // 打包的输出路径
	// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:publicPath: "/xzl"
	outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
	productionSourceMap: true, // 生产环境是否生成 sourceMap 文件

	// 配置别名
	chainWebpack: config => {
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@com', resolve('src/components'))
			.set('@ass', resolve('src/assets'));
		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后还可以加载到原始资源文件)
				}));
		}
		// 图片压缩
		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
		// 	// 添加可视化工具 - 查看打包后的文件大小!
		// 	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')
		// 	}
		// }
	},

	// css相关配置
	css: {
		extract: false, // 是否使用css分离插件 ExtractTextPlugin 简单来说就是为true时,打包会把css单独分文件出来打包,否则直接注入js之中打包
		// sourceMap: true, // 开启 CSS source maps?

		// 默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块(requireModuleExtension: false与loaderOptions配合使用会失效,因此要为true )
		// 因为要配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值,我们也需要指出
		requireModuleExtension: true,
		loaderOptions: {
			css: {
				modules: {
					// 定义模块化类名 hash值模式
					localIdentName: '[local]_[hash:base64:8]'
				}
			}
		}
	},

	configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				$: 'jquery',
				jquery: 'jquery',
				'window.jQuery': 'jquery',
				jQuery: 'jquery'
			}),
		],
		// 优化
		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
				})
			]
		},
	},
	// 服务器设置
	devServer: {
		port: 9999, // 端口
		host: '0.0.0.0', // 允许外部ip访问 || localhost(本地)
		open: true, // 自动打开浏览器
		inline: true,// 用于设置代码保存时是否自动刷新页面
		hot: true, //热加载 -> 用于设置代码保存时是否进行热更新 (局部刷新,不刷新整个页面)
		// openPage: '/#/table',//运行项目后 自动打开的页面 hash的时候 需要使用/#/XX -> 非hash时则不用(/table是路由http://localhost:9999/xzl/#/table)
		// https: true, // 用于设置是否启用https
		compress: true, // gzip 压缩 用于减少服务器向前端传输的数据量,提高浏览的速度。

		proxy: {	 //配置多个跨域
			'/api': { //本地 这边的/api是配置默认请求的api ,这还需要在axios实例对象中设置
				// target: process.env.VUE_APP_BASEURL,//服务器代理的baseUrl
				//target: 'http://10.0.124.20:8090/xzl',
				//target: 'http://10.0.124.20:8030/xzl',
				target: 'http://10.0.124.20:8080/xzl',
				ws: true, // 是否代理websocket
				changeOrigin: true,//将主机头的来源更改为目标URL,也就是是否允许跨域
				pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
					'^/api': ''
				}
			}
		}
	}
}

package.json

{
  "name": "vue_xpl",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "async-validator": "^4.0.7",
    "autoprefixer": "^10.4.2",
    "axios": "^0.21.1",
    "compression-webpack-plugin": "^5.0.1",
    "core-js": "^3.15.2",
    "css-loader": "^5.2.6",
    "echarts": "^4.9.0",
    "element-ui": "^2.15.3",
    "jquery": "^3.5.1",
    "postcss-px2rem": "^0.3.0",
    "qs": "^6.10.1",
    "sass": "^1.35.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.11",
    "vue-i18n": "^8.24.5",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.2.0",
    "vue-seamless-scroll": "^1.1.23",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.4.0",
    "ztree": "^3.5.24"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-polyfill": "^6.26.0",
    "browserslist": "^4.19.1",
    "caniuse-lite": "^1.0.30001300",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "image-webpack-loader": "8.0.1",
    "mini-css-extract-plugin": "^2.5.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^10.0.5",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.0.0",
    "webpack-bundle-analyzer": "^4.5.0"
  }
}

微信扫码订阅
UP更新不错过~
关注
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小渣亮

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值