1。移除预加载（preload）和预取（prefetch）Vue脚手架默认开启预加载和预取。当我们的项目很大时，这就成为首屏加载的最大罪魁祸首，preload和prefetch都是资源预加载机制；preload是预加载资源，但不执行，只在需要的时候执行；prefetch旨在预取一些资源以供下次导航/页面使用；preload比prefetch具有更高的优先级。//关闭预加载和预取链Webpack:config=>{//移除预加载（preload）插件config.plugins.delete('preload')//移除预取（prefetch）插件config.plugins.delete('prefetch')}2.减少打包文件体积productionSourceMapproductionSourceMap在vue-cli脚手架生成的项目中默认为true。它的作用是显示或定义一些“问题”代码。但是对于生产环境，我们可以关闭它。这样可以大大减小打包文件的大小。vue.config.jsmodule.exports={productionSourceMap:false}3.Webpack4.x版本之前的webpack分包，使用CommonsChunkPlugin做分离，webpack4最大的变化就是取消了CommonsChunkPlugin，引入了optimization.splitChunks。如果您的模式是生产模式，那么webpack4将自动启用代码拆分。config.optimization.splitChunks({chunks:'all',cacheGroups:{//cacheGroups下可以配置多个组，每个组可以根据测试设置条件。满足测试条件的模块commons:{name:'chunk-commons',test:resolve('src/components'),minChunks:3,//已经被打包分离至少三倍priority:5,//优先级reuseExistingChunk:true//表示是否使用已有的chunk,iftruethen表示如果当前chunk包含的模块已经被提取出来，则不会重新生成新的。},node_vendors:{name:'chunk-libs',chunks:'initial',//只打包初始依赖第三方测试:/[\\/]node_modules[\\/]/,priority:10},vantUI:{name:'chunk-vantUI',//单独解压vantUIpriority:20,//大权重当满足多个cacheGroup条件时，赋予高权重的测试：/[\\/]node_modules[\\/]_?vant(.*)/}}})config.optimization.runtimeChunk('单身的'）
