Vue Cli3 项目 vue.config.js 配置

ゝ一纸荒年。 2023-03-13 13:25 8阅读 0赞

### Vue Cli3 项目 vue.config.js 配置 ###

###    配置优化 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70][]

通过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);
      }
    }

效果如下

尺寸略有缩减，其他文件的大小也大多有所缩减

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 1][]

### 二、分割代码 ###

module.exports = {
        chainWebpack: config => {
            config.optimization.minimize(true);
            config.optimization.splitChunks({
              chunks: 'all'
            })
        }
    }

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 2][]

### 三、图片资源压缩 ###

开启图片压缩，要先安装 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

然后定义压缩插件

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

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

效果如下图

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

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

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

*原文链接：https://blog.csdn.net/qq\_35718410/article/details/99844054*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70]: /images/20230312/63b0eaf0e0124227b79c371c8a73d247.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 1]: /images/20230312/0c175c45013543d491da7949f8ae0891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 2]: /images/20230312/85f97c87e86f49aabb7bcfdcca314958.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200514104637305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5,size_16,color_FFFFFF,t_70