webpack4 optimization使用总结


Posted in Javascript onNovember 10, 2019

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}的文件。

webpack4 optimization使用总结

'single': 会生成一个唯一单独的runtime.js文件,就是manifest

webpack4 optimization使用总结

multiple:和true一致。name:{}:自定义runtime文件的name

webpack4 optimization使用总结

webpack4 optimization使用总结

noEmitOnErrors

默认为true,编译错误的时候是否不生成资源。

namedModules,namedChunks

development默认都为true,production默认为false,选择是否给modulechunk更有意义的名称。

nameModules:true这里会显示路径

webpack4 optimization使用总结

nameModules:false直接采用索引自增

webpack4 optimization使用总结

namedChunks:true

webpack4 optimization使用总结

namedChunks:false采用索引

webpack4 optimization使用总结

moduleIds

一般不建议配置namedModules,namedChunks
针对module的配置,这里会取hashed

webpack4 optimization使用总结

针对chunk的配置,特别是异步代码一般会采用@vue-cli3推荐的插件

webpack4 optimization使用总结

removeAvailableModules,removeEmptyChunks,mergeDuplicateChunks,flagIncludedChunks

这4个参数构建默认都是true,主要是用于构建优化,不需要改,基本就是字面意思。

splitChunks

主要就是根据不同的策略来分割打包出来的bundle
默认配置:

webpack4 optimization使用总结

1.chunks

webpack4 optimization使用总结

async(默认)

splitChunks:{
  chunks:'async'//分割异步打包的代码,
}

打包出b和vue两个chunk。

webpack4 optimization使用总结

all:

splitChunks:{
  chunks:'all',//同时分割同步和异步代码,推荐。
  cacheGroup:{//默认的规则不会打包,需要单独定义
   a: {
    test: /a\.js/,
    chunks: "all",
    name: "a",
    enforce: true
   }
  }
}

webpack4 optimization使用总结

initial

splitChunks:{
  chunks:'initial'//也会同时打包同步和异步,但是异步内部的引入不再考虑,直接打包在一起,会将vue和b的内容直接打包成chunk,
  cacheGroup:{//默认的规则不会打包,需要单独定义
   a: {
    test: /a\.js/,
    chunks: "all",
    name: "a",
    enforce: true
   }
  }
}

webpack4 optimization使用总结

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
文件名称分隔符号~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
node后端服务保活的实现
Nov 10 #Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 #Javascript
vue父子组件的通信方法(实例详解)
Nov 10 #Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 #Javascript
vue-父子组件和ref实例详解
Nov 10 #Javascript
vue $set 给数据赋值的实例
Nov 09 #Javascript
You might like
php生成缩略图的类代码
2008/10/02 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP实现文件下载详解
2014/11/27 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
js 数组操作代码集锦
2009/04/28 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
Python中http请求方法库汇总
2016/01/06 Python
Python自动生产表情包
2017/03/17 Python
浅析python协程相关概念
2018/01/20 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
django自带调试服务器的使用详解
2019/08/29 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
医科大学生的自我评价
2013/12/04 职场文书
给朋友的道歉信
2014/01/09 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
上班看电影检讨书
2014/02/12 职场文书
计算机毕业生求职信
2014/06/10 职场文书
党员评议自我评价
2015/03/03 职场文书
无罪辩护词范文
2015/05/21 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers