Vue Cli3 项目 vue.config.js 配置

配置优化

• 一、js文件最小化处理
• 二、分割代码
• 三、图片资源压缩
• 四、开启gzip压缩

 

先看一下优化配置之前的文件大小

 

通过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({
            bypassOnDebug: true
        })
        .end()
}

四、开启gzip压缩

要开启gzip压缩, 这里我们需要引入一个插件: compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

然后定义压缩插件

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress = new CompressionWebpackPlugin(
  {
    filename: info => {
      return `${info.path}.gz${info.query}`
    },
    algorithm: 'gzip', 
    threshold: 10240,
    test: new RegExp(
      '\\.(' +
      ['js'].join('|') +
      ')$'
    ),
    minRatio: 0.8,
    deleteOriginalAssets: false
  }
)


module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ?
      '/' : '/',
  //放置生成的静态资源 (js、css、img、fonts) 的目录
  assetsDir: 'static',
  //关闭生产环境的 source map 以加速生产环境构建
  productionSourceMap: false,
  chainWebpack: config => {
      //最小化代码
      config.optimization.minimize(true);
      //分割代码
      config.optimization.splitChunks({
          chunks: 'all'
      });
      // //压缩图片
      config.module
          .rule('images')
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({
              bypassOnDebug: true
          })
          .end()
  },
  configureWebpack: {
      plugins: [compress]
  }
}

然后在devServer加入如下配置即可看到gzip压缩效果

devServer: {
    //在本地服务器开启gzip，线上服务器都支持gzip不需要设置
    before(app) {
        app.get(/.*.(js)$/, (req, res, next) => {
            req.url = req.url + '.gz';
            res.set('Content-Encoding', 'gzip');
            next();
        })
    }
}

效果如下图

经过以上几步优化，文件体积已经缩减了不少，我们可以看一下打包后dist目录体积大小对比

• 1、优化前 7.1MB
• 2、优化后 1.5MB

 

vue.config.js文件的完整配置如下

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress = new CompressionWebpackPlugin({
    filename: info => {
        return `${info.path}.gz${info.query}`
    },
    algorithm: 'gzip',
    threshold: 10240,
    test: new RegExp(
        '\\.(' + ['js'].join('|') +
        ')$'
    ),
    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    deleteOriginalAssets: false // 删除原文件
});

module.exports = {
    //该配置能帮助你为项目中的所有资源指定一个基础路径，它被称为公共路径
    publicPath: process.env.NODE_ENV === 'production' ?
        '/' : '/',
    //放置生成的静态资源 (js、css、img、fonts) 的目录
    assetsDir: 'static',
    //关闭生产环境的 source map 以加速生产环境构建
    productionSourceMap: false,
    chainWebpack: config => {
        //最小化代码
        config.optimization.minimize(true);
        //分割代码
        config.optimization.splitChunks({
            chunks: 'all'
        });
        //压缩图片
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },
    configureWebpack: {
        // 通过 compression-webpack-plugin 插件对js文件进行gzip压缩
        plugins: [compress]
    },
    devServer: {
        proxy: {
            '/mock/*': {
                target: 'https://easy-mock.com/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {}
            }
        },
        //在本地服务器开启gzip，线上服务器都支持gzip不需要设置
        before(app) {
            app.get(/.*.(js)$/, (req, res, next) => {
                req.url = req.url + '.gz';
                res.set('Content-Encoding', 'gzip');
                next();
            })
        }
    }
}

原文链接：https://blog.csdn.net/qq_35718410/article/details/99844054