在vue.config.js中优化webpack配置的方法
作者：先知demons
在日常开发中我们离不开打包工具webpack,但是不同的配置会影响我们项目的运行构建时间,也会影响打包之后项目包的大小,这篇文章记录一下我使用过的可以优化webpack的配置,需要的朋友可以参考下
前言：
在日常开发中我们离不开打包工具webpack，但是不同的配置会影响我们项目的运行构建时间，也会影响打包之后项目包的大小，这篇文章记录一下我使用过的可以优化webpack的配置。
注：以本专栏上篇文章里面的vue.config.js为基础，去加配置
一、压缩图片
1、先下载依赖
npm install --save-dev image-webpack-loader
2、在vue.config.js的module.exports上面先定义设置值
①默认设置：（4M的图片使用默认设置压缩成1.4M）
const defaultOptions = {
bypassOnDebug: true,
};②自定义设置
const customOptions = {
mozjpeg: {
progressive: true,
quality: 50
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.5, 0.65],
speed: 4
},
gifsicle: {
interlaced: false,
},
// 不支持WEBP就不要写这一项
webp: {
quality: 75
}
}3、在chainWebpack中加入配置：
chainWebpack: config => {
config.module.rule('images')
.test(/\.(gif|png|jpe?g|svg)$/i)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options(customOptions)
.end()
}options中可以切换使用默认还是自定义
二、公共代码抽离：
在configureWebpack加入配置：
configureWebpack: (config) => {
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",
},
},
},
};
}三、对代码进行压缩，并移除控制台输出
1、先下载依赖
npm install uglifyjs-webpack-plugin --save-dev
2、在vue.config.js的第一行引入依赖
const UglifyPlugin = require("uglifyjs-webpack-plugin");
3、在configureWebpack中加入配置：
config.plugins.push(
new UglifyPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ["console.log"],
},
},
sourceMap: false,
parallel: true,
})
);以上就是在vue.config.js中优化webpack配置的方法的详细内容，更多关于vue.config.js优化webpack的资料请关注脚本之家其它相关文章！