重读vue电商网站47之生成打包报告

简介: 重读vue电商网站47之生成打包报告

打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:

① 通过命令行参数的形式生成报告

Javascript

// 通过 vue-cli 的命令选项可以生成打包报告

// --report 选项可以生成 report.html 以帮助分析包内容

vue-cli-service build --report

② 通过可视化的UI面板直接查看报告(推荐)

在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。

通过 vue.config.js 修改 webpack 的默认配置

通过 vue-cli 3.0 工具生成的项目,默认隐藏了所有 webpack 的配置项,目的是为了屏蔽项目的配置过程,让程

序员把工作的重心,放到具体功能和业务逻辑的实现上。

如果程序员有修改 webpack 默认配置的需求,可以在项目根目录中,按需创建 vue.config.js 这个配置文件,从

而对项目的打包发布过程做自定义的配置

(具体配置参考https://cli.vuejs.org/zh/config/#vue-config-js)。

Javascript

// vue.config.js

// 这个文件中,应该导出一个包含了自定义配置选项的对象

module.exports = {

// 选项...

}

为开发模式与发布模式指定不同的打包入口

默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即 src/main.js)。为了将项目

的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:

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

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

configureWebpack 和 chainWebpack

在 vue.config.js 导出的配置对象中,新增 configureWebpack 或chainWebpack节点,来自定义 webpack 的打包配置。

在这里, configureWebpack 和 chainWebpack 的作用相同,唯一的区别就是它们修改 webpack 配置的方式不同:

① chainWebpack 通过链式编程的形式,来修改默认的 webpack 配置

② configureWebpack 通过操作对象的形式,来修改默认的 webpack 配置

相关文章
|
3天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
33 11
|
3天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
192 65
|
3天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
192 62
|
2天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
13 10
|
2天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
17 9
|
1天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
2天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
14 7
|
1天前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
1天前
|
JavaScript
vue学习(9)事件处理
vue学习(9)事件处理
17 2
|
1天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
11 1