vue.config.js相关配置及项目优化

// 相关文档地址
https://www.webpackjs.com/plugins/split-chunks-plugin/#optimizationsplitchunks
https://cli.vuejs.org/zh/config/#configurewebpack
https://nodejs.cn/api/

const pageList = {
  'index':{
    entry:'./src/main.js',
    filename:'index.html',
    outputDir:'./dist/myapp'
  },
  'mini':{
    entry:'./src/channel/main.js',
    filename:'index.html',
    outputDir:'./dist/mini'
  },
  'temp':{
    entry:'./src/main.js',
    filename:'index.html',
    outputDir:'./dist/temp'
  }
}
let curPage = process.env.NODE_PAGE

module.exports = {
  /**
   * 打包后部署时的基本url，默认值"/",用法和webpack中的output.publicPath一致
   * 默认情况下vue cli会假设你的应用部署在一个域名的根路径上
   * eg:域名： https://www.my-app.com   publicPath:"/"   打包资源就会放在https://www.my-app.com/
   * 域名：   https://www.my-app.com    publicPath:"/my-app/"   打包资源就会放在https://www.my-app.com/my-app/
   * publicPath 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，
   * 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
   */
  publicPath:"./",
  /**
   * 打包后资源文件的输出目录
   * outputDir:"dist"  打包后放在dist目录下
   */
  outputDir:pageList[curPage].outputDir,
  /**
   * 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 eg:dist/static/js/a.js
   * 从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略
   */
   assetsDir:"static",
   /**
    * pages Type: Object Default: undefined
    * 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
    * 如果项目编译后涉及对外输出、发版前通过包灰度进行验证、编译临时包避免部署测试环境覆盖别人需求
    * 可以在package.json添加脚本命令通过变量NODE_PAGE和pageList进行匹配从而获取当前编译的配置
    * 可通过process.env.NODE_PAGE获取当前进程的NODE_PAGE值 脚本如下
    * "build":"cross-env NODE_PAGE=index vue-cli-service build "
    * "temp:build":"cross-env NODE_PAGE=temp vue-cli-service build "
    *  在shell脚本中添加所需的打包命令即可编译出不同作用的包（用于测试用于验证），当然你也可以根据NODE_PAGE做更多处理比如是否开启debug模式等
    * 
    */
   pages:{
      app:{
        // page 的入口
        // entry: 'src/index/main.js',
        entry:pageList[curPage].entry,
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: pageList[curPage].filename,
      }
   },
   /**
    * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 默认为true
    * Sourcemap 就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射，
    * Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，debug 困难的问题
    * 直白点就是源代码与打包后的代码映射关系，可以快速查找代码错误，有错会报错，定位到源代码的错误地点
    */
    productionSourceMap:true,
   /**
    * configureWebpack Type: Object | Function
    * 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    */
    configureWebpack:{
      /**
       * 优化的配置项 
       * 参考：
       * https://cloud.tencent.com/developer/article/1916430
       * https://www.webpackjs.com/plugins/split-chunks-plugin/#defaults  
       * https://mp.weixin.qq.com/s?__biz=Mzg3OTYwMjcxMA==&mid=2247484029&idx=1&sn=7862737524e799c5eaf1605325171e32&scene=21#wechat_redirect
       * https://blog.csdn.net/weixin_44828005/article/details/121089862
       */
      optimization:{
        usedExports:true, // 是否把没有使用到的文件删除，去除无效的代码，减小文件体积
        /**
         * webpack内置的打包分割 针对打包后产物vendors.js(第三方插件生成的)体积过大时进行拆包处理
         * 可配置选项如 按 Module 被 Chunk 引用的次数决定是否进行分包 按Chunk 包大小决定是否分包
         * 效果：打包后原来放在一个vendors.js，现在放在不同的.js文件中
         */
         splitChunks:{
            /**
             * chunks默认只支持异步async，
             * 当设置chunks的值为all，对所有的模块有效(同步和异步引入的依赖) 常用
             * 当设置chunks的值为async时，只有在异步加载模块的时候，才会进行分包处理该模块
             * 当设置chunks的值为initial时，只对 Initial Chunk 生效 （只对入口entry的chunk有有效）
             */
            chunks:'all',// 
            minSize:30*1024,// 当模块大于30kb时进行拆分
            minChunks:1,// //模块引用的次数，只要>=3次就分割出来
            // 在满足 minChunks 基础上，还可以通过 maxInitialRequest/maxAsyncRequests 配置项限定分包数量
            maxAsyncRequests:5, //按需加载时的最大并行请求数 超过5个就不分包
            maxInitialRequests:3, // 入口点的最大并行请求数 入口文件不同请求超过3次不分包
            /**
             * name chunk名称
             * 拆分 chunk 的名称（生成的文件名前缀）提供字符串或函数使你可以使用自定义名称。
             * 提供 true 将根据块和缓存组键自动生成名称
             * 指定字符串或始终返回相同字符串的函数会将所有常见模块和vendor合并为一个 chunk。这可能会导致更大的初始下载量并减慢页面加载速度
             * 在cacheGroup 缓存组中也可以使用name (建议在缓存组中使用)
             */
            // name:"chu",
            // 缓存组
            /**
             * cacheGroups之外设置的约束条件比如说默认配置里面的chunks、minSize、minChunks等等都会作用于cacheGroups，
             * cacheGroups也可以将上面的所有属性都重新定义，就会覆盖外面的默认属性，比如default这个缓存组就设置了minChunks=2，他会覆盖掉默认值1。
             * 除了test, priority and reuseExistingChunk，这三个是只能定义在cacheGroup这一层的
             * 参考：
             * https://article.itxueyuan.com/2KoW34
             * https://blog.csdn.net/weixin_45821809/article/details/129275418
             * https://zhuanlan.zhihu.com/p/110175256
             * https://zhuanlan.zhihu.com/p/414381462
             */
            
            cacheGroups:{
              // webpackp配置默认有两个缓存组：vender和default
              vendors: {
                //test 匹配node_modules目录下的文件即筛选从node_modules文件夹下引入的模块，所以所有第三方模块才会被拆分出来
                test: /[\/]node_modules[\/]/,  
                priority: -10   // 权重值
              },
              default: {
                  minChunks: 2,
                  /**
                   * 优化将优先考虑具有更高 priority（优先级）的缓存组,
                   * 一个模块可以属于多个缓存组。哪个缓存组的priority值大采用哪个缓存组的规则
                   * 默认组的优先级为负，以允许自定义组获得更高的优先级（自定义组的默认值为 0）
                   * 
                   * 如果有一个模块满足了多个缓存组的条件就会去按照权重划分，谁的权重高就优先按照谁的规则处理，
                   * default的priority是-20明显小于vendors的-10，所以会优先按照vendors这个缓存组拆分
                   */
                  priority: -20,   // 权重值
                  /**
                   * 如果当前 chunk 包含已从主 bundle 中拆分出的模块，
                   * 则它将被重用，而不是生成新的模块
                   */
                  reuseExistingChunk: true//遇到重复包直接引用，不重新打包
              },
              
              vconsole:{
                chunks：all,
                test:/vconsole/,
                reuseExistingChunk: true,//遇到重复包直接引用，不重新打包
                minChunks:1,
                priority:1,
                // chunk名称 最终生成的文件名vconsole11.ac42a99b.js 中间ac42a99bs为hash值 ##常用
                name:'vconsole11',//
                /**
                 * 仅在初始 chunk 时才允许覆盖文件名。 也可以在 output.filename 中使用所有占位符
                 * 这个属性会覆盖output.filename这个属性，前提是chunks设为initial(入口entry的chunk)
                 * 也可以在 splitChunks.filename 中全局设置此选项，但是不建议这样做，如果 splitChunks.chunks 未设置为 'initial'，则可能会导致错误。避免全局设置。
                 */
                filename:'[name].bundle.js'
              }
            }
         }
      }
    },
    /**
     * chainWebpack Type: Function
     * 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
     */
    chainWebpack:config=>{

    },  
}