vue项目上线优化之生成打包报告以及修改webpack开发和发布环境的入口文件

淩亂°似流年 2023-05-28 08:23 9阅读 0赞

#### 一、生成 vue 项目的打包报告 ####

1.  在打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告，生成报告有两种方式：

*  通过命令行参数的形式生成报告
 *  通过可视化的 `UI` 面板直接查看报告，通过控制台和分析面板，直接看到项目中存在的问题

1.  在这里，以命令行参数的形式生成报告，通过 `npm run build --report`的命令就可以生成报告，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]
2.  在加上 `--report`命令后，可以生成 `report.html`来帮助分析包的内容，通过 `http://127.0.0.1:8888/` 就可以查看打包报告里面的内容了 ，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]

#### 二、通过 vue.config.js 文件修改webpack的默认配置 ####

1.  修改 `webpack` 默认配置的需求，可以在项目根目录中，按需创建 `vue.config.js` 这个配置文件，从 而对项目的打包发布过程做自定义的配置，代码如下：

module.exports = { 
        ... // 具体配置选项
    }

1.  在`vue`项目的开发模式和发布模式中，共用同一个打包的入口文件，也就是 `src/main.js`，为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

*  开发模式的入口文件为 `src/main-dev.js`
 *  发布模式的入口文件为`src/main-prod.js`

1.  在 `vue.config.js`导出的配置对象中，新增 `configureWebpack`或 `chainWebpack` 节点，来自定义`webpack` 的打包配置。`configureWebpack` 和 `chainWebpack` 的作用相同，唯一的区别就是它们修改 `webpack` 配置的方式不同：

*  `chainWebpack` 通过 链式编程的形式，来修改默认的 `webpack` 配置
 *  `configureWebpack` 通过 操作对象的形式，来修改默认的 `webpack` 配置

1.  在`vue`项目的`src`根目录下，建立 `main-dev.js` 和 `main-prod.js` 文件，也就是之前的 `main.js` 的配置文件.
2.  在`vue.config.js` 文件中，通过 `chainWebpack`修改配置，通过 `process.env.NODE_ENV` 判断是`production`环境还是`development`环境，从而添加不同的入口文件，代码如下：

module.exports = { 
        // 通过 chainWebpack 修改 webpack的默认配置
        chainWebpack: config => { 
            // 修改生产环境的入口文件
            config.when(process.env.NODE_ENV === 'production', config => { 
                config.entry('app').clear().add('./src/main-prod.js')
            })
            
            // 修改开发环境的入口文件
            config.when(process.env_NODE_ENV === 'development', config => { 
                config.entry('app').clear().add('./src/main-dev.js')
            })
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/6286a024d2b446558ce7c4368912c0c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/7122966139ce4c6ebe5eb4b1816975d3.png