问题描述
- 因为最近在开发过程中发现项目打包的的大小越来越大,所以想看一下具体占用打包体积的文件是什么,所以便找了自己mock的项目中通过
webpack-bundle-analyzer
打包进行查看。便发现了另外一个问题:chunk-vendors.js的大小很大,这样在js加载时会一次性加载完成,从而增加了首屏加载的时间。
所以,从我们的dome项目中都能发现chunk-vendors.js
文件太大了,所以我们需要将其优化一下,拆分一下
1. 首先chunk-vendors.js是什么?
chunk-vendors.js
,顾名思义chunk(块/包)-vendors(供应商)
,即为:不是自己写的模块包,也就是/node_modules
项目目录的所有模块包。所以这个chunk-vendors.js
文件大的原因其实就是,我们把第三方的包都打包在这一个文件上了,都糅在一块,肯定大啊,所以想办法把其做一个拆分。
2.使用optimization.splitChunks做分包
-
我们先看一下分包拆分以后打包的dist文件夹中的js文件大小
- 这样的话,我们就把chunk-vendors.js文件由,原来的3097kB拆分成一个个几十KB的包文件了,这样的话,生产环境加载的时候,就会快一些.
splitChunks分包代码
我们以vue为例,在vue.config.js文件中加入以下代码。代码大家直接复制粘贴即可使用,也是笔者自己在生产环境中使用的哦,我也是复制粘贴的。
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return
return {
plugins: [
// ......
],
// 看这里:把chunk-vendors.js进行分包,提升资源加载速度,很有必要
optimization: {
/**
* runtimeChunk可选值有:true或'multiple'或'single'
* true或'multiple'会有每个入口对应的chunk。不过一般情况下
* 考虑到要模块初始化,设置为single就够多数情况下使用啦。
* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
* */
runtimeChunk: 'single',
/**
* 以前是CommonsChunkPlugin,现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
* */
splitChunks: {
chunks: 'all', // 可选值:all,async 和 initial。all功能最强大,所以咱们就使用all
maxInitialRequests: Infinity, // 最大并行请求数,为了以防万一,设置无穷大即可
minSize: 20000, // 引入的模块大于20kb才做代码分割,官方默认20000,这里不用修改了
maxSize: 60000, // 若引入的模块大于60kb,则告诉webpack尝试再进行拆分
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
priority: -10, // 优先级值越大优先级越高,默认-10,不用修改
name(module) { // 设定分包以后的文件模块名字,按照包名字替换拼接一下
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}`
},
},
},
}
}
}
},
总结 :
- 经验时一点点增加的,经验时一点点积累的。
参考地址:
项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间
webpack-bundle-analyzer 打包项目管理工具