zoukankan      html  css  js  c++  java
  • Webpack之optimization.splitChunks代码分割插件的配置

    SplitChunkPlugin插件配置参数详解

    • 对引入的库代码(例如:lodash、jQuery等)进行代码的分割进行优化
    • 若配置时只写chunks:"all",其余则为默认配置
    • 代码分割后的每一个js文件即为Chunk,如下图中的(main.js、vendors.js)
    optimization: {
    		splitChunks: {
    			chunks: "all",   // 共有3个值"initial","async"和"all"。配置后,代码分割优化仅选择初始块,按需块或所有块
    			minSize: 30000,   // (默认值:30000)块的最小大小
    			minChunks: 1,    // (默认值:1)在拆分之前共享模块的最小块数
    			maxAsyncRequests: 5,   //(默认为5)按需加载时并行请求的最大数量
    			maxInitialRequests: 3,  //(默认值为3)入口点的最大并行请求数
    			automaticNameDelimiter: '~',  // 默认情况下,webpack将使用块的来源和名称生成名称,例如vendors~main.js
    			name: true,
    			cacheGroups: {  // 以上条件都满足后会走入cacheGroups进一步进行优化的判断
    				vendors: {
    					test: /[\/]node_modules[\/]/,  // 判断引入库是否是node_modules里的
    					priority: -10,   // 数字越大优先级越高 (-10大于-20)
    					filename: 'vendors.js'  // 设置代码分割后的文件名
            		},
    				default: {   //所有代码分割快都符合默认值,此时判断priority优先级
    					minChunks: 2,  
    					priority: -20,
    					reuseExistingChunk: true   // 允许在模块完全匹配时重用现有的块,而不是创建新的块。
    				}
    			}
        	}
    	},
    

    学习文档:https://www.webpackjs.com/plugins/split-chunks-plugin/

    今天你学习了吗!!!
  • 相关阅读:
    C#高级特性_Attribute
    C#高级特性_Lambda
    委托(delegate)
    C# 属性、索引
    C#中的interface
    枚举型Enum和结构型Stuct
    javascript学习笔记
    github page 和 hexo 搭建在线博客
    2015/9/22 开通博客园
    phoenix 入门
  • 原文地址:https://www.cnblogs.com/nayek/p/12067504.html
Copyright © 2011-2022 走看看