webpack 代码分离优化快速指北
分离代码文件
在此之前,首先要知道经常配置的output中有关filename和chunkFilename的区别;简单来说在entry定义的入口文件走的就是filename配置项,在入口文件内部引入的通常情况下是chunk,走chunkFilename的配置
所以很多时候分离代码文件就是将不同的chunk分离开来,生产环境中有利于浏览器缓存,加快二次访问的速度
代码分离的时候,optimization中配置的splitChunks默认就是async,默认对异步代码进行分离;所以通常情况下能用异步的用异步import;配合prefetching和preloading能够产生很好的效果
filename和chunkFilename的区别
output:{ filename:'[name].js', chunkFilename:'[name].chunk.js' }
举个例子
如果入口文件是main.js
那么打包后生成的文件是main.js
如果main.js中引入了其他模块,比如引入了lodash那么可能会生成一个名为lodash.chunk.js文件
基本概念了解了,接下来开始对js和css文件进行分离的操作:
js代码分离
js代码的分离操作,首先要考虑的就是对异步代码的分离。这里使用dynamicImport
dynamicImport
可以使用magiccomment来修改动态import导出的chunkname,语法规则如下:
import('/*webpackChunkName:"lodash"*/''lodash').then(//...)
如果需要使用这种注释的写法,应该安装模块@babel/plugin-syntax-dynamic-import,并在babelrc中引入这个插件,使用方法很简单这里不多说了
splitChunks
splitChunk的相关配置参数
建议将公共使用的第三方类库显式地配置为公共的部分,而不是webpack自己去判断处理
- chunks:表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;
- minSize:表示在压缩前的最小模块大小,默认为0;
- minChunks:表示被引用次数,默认为1;
- maxAsyncRequests:最大的按需(异步)加载次数,默认为1;
- maxInitialRequests:最大的初始化加载次数,默认为1;
- name:拆分出来块的名字(ChunkNames),默认由块名和hash值自动生成;
- cacheGroups:缓存组。
缓存组中还有其他几个参数:
- priority:表示缓存的优先级;
- test:缓存组的规则,表示符合条件的的放入当前缓存组,值可以是function、boolean、string、RegExp,默认为空;
- reuseExistingChunk:表示可以使用已经存在的块,即如果满足条件的块已经存在就使用已有的,不再创建一个新的块。
webpack4——SplitChunksPlugin使用指南
module.exports={ entry:{ vendor:["react","lodash","angular",...],//指定公共使用的第三方类库 }, optimization:{ splitChunks:{ cacheGroups:{ vendor:{ chunks:"initial", test:"vendor", name:"vendor",//使用vendor入口作为公共部分 enforce:true, }, }, }, }, //...其他配置 }
或者:
optimization:{ splitChunks:{ name:true,//自动处理文件名 chunks:'all', minChunks:1,//至少import1次的即需要打包 automaticNameDelimiter:'-', cacheGroups:{ vendors:{ test:/axios|lodash/,//将这两个第三方模块单独提取打包 chunks:'initial', } } } },
optimization-splitchunks
chunks的配置
注意⚠️
如果是动态import,import('/*webpackChunkName:"lodash"*/''lodash').then()那么splitChunks设置为async,代码分离将会起作用。
如果是同步加载import,import_from'lodash'那么splitChunks设置为async将不起作用,如果设置为all,那么还需要配置cacheGroups
cacheGroups的配置
vendors缓存组的配置可以检测第三方模块是否在node_modules中,如果存在则该splitChunks生效,将会分离到vendors~...这样的文件中
配置filename则会打包成[filename]命名的文件中
runtimeChunk的作用
这个runtimeChunk实际上就是链接业务逻辑和第三方类库之间的关系的manifest。需要将其提取出来,否则使用contenthash的情况下有可能会导致模块内容没发生改变的情况下出现contenthash多次打包出现不一致的情况(实际上就是存在在业务逻辑和模块中的manifest发生了改变)
//v4版本的webpack不用配置,但最好也提取出来 optimization:{ runtimeChunk:{ name:'runtime' } }
reuseExistingChunk:
如果a模块使用了b,b模块又使用了a;a被打包到common.js中,打包b时将直接使用已经打包好的common.js中的a;这就是reuseExistingChunk的作用:
default:{ reuseExistingChunk:true, filename:'common.js' }
他的含义就是只要其中一个模块使用了import$from'jquery',其他文件中就可直接使用$变量,webpack会自动在打包过程中import这个模块
css代码分离
css部分分离代码文件直接使用extract-text-webpack-plugin即可
一个JS文件,加载页面时虽然只需要加载一个JS文件,但代码一旦改变,用户访问新的页面时就需要重新加载一个新的JS文件。有些情况下,我们只是单独修改了样式,这样也要重新加载整个应用的JS文件,相当不划算。
多个组件共用一部分样式,如果分离开来,第二个页面就有了CSS文件的缓存,访问速度自然会加快
MiniCssExtractPlugin
新版本的webpack使用这个插件
注意,在引入样式文件import'./style.css'的时候,如果配置了treeshaking,应当在package.json中配置:
"sideEffects":[ "*.css" ]
⚠️注意,另外在vue中如果有style标签,还需要在sideEffects中加入*.vue的配置项。不必担心vue中的script部分会被treeShaking掉。
插件的相关配置
filename指的是如果该css文件会直接被插入html中那么走的就是filename的配置
plugins:[ newMiniCssExtractPlugin({ filename:'[name].css', chunkFilename:'[name].chunk.css' }) ]
既然有分离那就有合并,这里顺便提及一下css代码合并
如果有多个入口,想把多个入口引入的样式文件全部打包到一个地方,那么可以使用optimization配置项的splitChunks,所以这个配置项不仅仅只作用于js,css也是可以的:
optimization:{ splitChuns:{ cacheGroups:{ styles:{ name:'style',//将多个入口文件中的样式文件全部合并打包 test:/\.css$/, chunks:'all', enforce:true } } } }
css代码根据入口分别打包
还可以根据入口的不同,来分别打包css文件,文档已经讲的很详细了,这部分比较简单可以直接戳文档https://webpack.js.org/plugins/mini-css-extract-plugin
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。