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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。