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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
JS实现简单的表格增删
Jan 16 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python之import机制详解
2014/07/03 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
python获取mp3文件信息的方法
2015/06/15 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
Shell如何接收变量输入
2012/09/24 面试题
就业推荐自我鉴定
2013/10/06 职场文书
迟到检讨书400字
2014/01/13 职场文书
高中班主任评语大全
2014/04/25 职场文书
青年志愿者活动总结
2014/04/26 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang