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 EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
angular之ng-template模板加载
Nov 09 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
element 动态合并表格的步骤
Dec 31 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
行政管理专业推荐信
2013/11/02 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
部队个人年终总结
2015/03/02 职场文书
公司放假通知范文
2015/04/14 职场文书
工程进度款催款函
2015/06/24 职场文书
Python基础详解之描述符
2021/04/28 Python