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