vue-cli3项目vue.config.js配置
先看一下优化配置之前的文件大小
通过vue-cli3脚手架创建的项目,可以通过在项目根目录下创建vue.config.js配置文件来修改优化webpack配置,主要优化流程分为以下几步进行,用于优化项目打包,减小体积大小
1.js最小化处理
2.js文件分割,防止单文件大小
3.图片资源文件压缩
4.开启gzip压缩
配置优化
一、js文件最小化处理
代码的最优化, 通过chainWebpak来处理. 这里使用的是webpack配置中的optimization来处理的
module.exports = {
chainWebpack: config => {
config.optimization.minimize(true);
}
}
效果如下
尺寸略有缩减,其他文件的大小也大多有所缩减
二、分割代码
module.exports = {
chainWebpack: config => {
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: 'all'
})
}
}
效果如下
三、图片资源压缩
开启图片压缩,要先安装 image-webpack-loader 插件
npm install image-webpack-loader --save
然后加入如下配置
chainWebpack: config => {
//最小化代码
config.optimization.minimize(true);
//分割代码
config.optimization.splitChunks({
chunks: 'all'
});
// //压缩图片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOn