小言_互联网的博客

前端学习（2737）：重读vue电商网站47之生成打包报告

2020-12-19 11:27 265人阅读  评论(0)

 

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

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

Javascript


       
    
        
  1. 
         
    
          
    
         
    
         
    
          
    
           // 通过 vue-cli 的命令选项可以生成打包报告
          
    
         
    2. 
        
  2. 
         
    
          
    
         
    
         
    
          
    
           // --report 选项可以生成 report.html 以帮助分析包内容
          
    
         
    3. 
        
  3. 
         
    
          
    
         
    
         
    
          
    
           vue-cli-service build --report
          
    
         
    4.

② 通过可视化的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


       
    
        
  1. 
         
    
          
    
         
    
         
    
          
    
           // vue.config.js
          
    
         
    2. 
        
  2. 
         
    
          
    
         
    
         
    
          
    
           // 这个文件中，应该导出一个包含了自定义配置选项的对象
          
    
         
    3. 
        
  3. 
         
    
          
    
         
    
         
    
          
    
           module.exports = {
          
    
         
    4. 
        
  4. 
         
    
          
    
         
    
         
    
          
    
           // 选项...
          
    
         
    5. 
        
  5. 
         
    
          
    
         
    
         
    
          
    
           }
          
    
         
    6.

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

默认情况下，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 配置

两者具体的使用差异，可参考如下网址：

传送门


转载：https://blog.csdn.net/weixin_43392489/article/details/110789110
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场