optimization总结

minimize

默以为true，结果就是紧缩js代码。

minimizer

能够自定义UglifyJsPlugin和一些设置,默许的紧缩为uglifyjs-webpack-plugin

//比如在构建的时刻,愿望新增css的紧缩
minimizer:
  mode === "development"
    ? []
    : [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: mode === "development"
        }),
        new OptimizeCSSAssetsPlugin()
      ]

runtimeChunk

默以为false,runtime相干的代码(各个模块之间的援用和加载的逻辑)内嵌入每一个entry。

true：关于每一个entry会天生runtime~${entrypoint.name}的文件。

'single': 会天生一个唯一零丁的runtime.js文件，就是manifest。

multiple：和true一致。

name:{}：自定义runtime文件的name

noEmitOnErrors

默以为true,编译毛病的时刻是不是不天生资本。

namedModules,namedChunks

development默许都为true,production默以为false，挑选是不是给module和chunk更有意义的称号。

nameModules:true这里会显现途径

nameModules:false直接采纳索引自增

namedChunks:true

namedChunks:false采纳索引

moduleIds

平常不发起设置namedModules,namedChunks
针对module的设置，这里会取hashed。

针对chunk的设置，特别是异步代码平常会采纳@vue-cli3引荐的插件

removeAvailableModules,removeEmptyChunks,mergeDuplicateChunks,flagIncludedChunks

这4个参数构建默许都是true,主如果用于构建优化，不须要改,基础就是字面意义。

splitChunks

重要就是依据差别的战略来支解打包出来的bundle。
默许设置:

1.chunks

async（默许）：

splitChunks:{
   chunks:'async'//支解异步打包的代码，
}

打包出b和vue两个chunk。

all:

splitChunks:{
   chunks:'all',//同时支解同步和异步代码,引荐。
   cacheGroup:{//默许的划定规矩不会打包,须要零丁定义
     a: {
       test: /a\.js/,
       chunks: "all",
       name: "a",
       enforce: true
     }
   }
}

initial

splitChunks:{
   chunks:'initial'//也会同时打包同步和异步，然则异步内部的引入不再斟酌，直接打包在一起，会将vue和b的内容直接打包成chunk,
   cacheGroup:{//默许的划定规矩不会打包,须要零丁定义
     a: {
       test: /a\.js/,
       chunks: "all",
       name: "a",
       enforce: true
     }
   }
}

2.name
支解的js称号，默以为true，返回
${cacheGroup的key} ${automaticNameDelimiter} ${moduleName},能够自定义。

3.minChunks
最小公用模块次数，默以为1

4.minSize,maxSize,maxAsyncRequests（按需加载时刻最大的并行请求数）,maxInitialRequests（一个进口最大的并行请求数）
都为字面意义，平常不发起改。

5.cacheGroups
缓存战略，默许设置了支解node_modules和公用模块。内部的参数能够和掩盖外部的参数。
test 正则婚配文件
priority 优先级
reuseExistingChunk是不是复用存在的chunk

   cacheGroup:{
     a: {
       test: /a\.js/,//婚配划定规矩
       minChunks:2,//重写公用chunks的次数
       chunks: "all",
       name: "a",//重写文件称号
       enforce: true //强迫天生
     }
   }

6.automaticNameDelimiter
文件称号分开标记~