做网站团队的人员安排,郑州网站制作的公司,吴中区做网站,广告文案生成器optimization.splitChunks的具体功能和配置信息可以去网上自行查阅。
这边简单讲一下他的使用场景、作用、如何使用#xff1a;
1、没用使用splitChunks进行分包之前#xff0c;所有模块都揉在一个文件里#xff0c;那么当这个文件足够大、网速又一般的时候#xff0c;首…optimization.splitChunks的具体功能和配置信息可以去网上自行查阅。
这边简单讲一下他的使用场景、作用、如何使用
1、没用使用splitChunks进行分包之前所有模块都揉在一个文件里那么当这个文件足够大、网速又一般的时候首屏加载就会很慢。如下图这三块会在首次进入项目的时候会一起加载 2、这时我们使用splitChunks进行分包在vue.config.js进行配置代码如下
module.exports {configureWebpack: {optimization: {splitChunks: {chunks: all,cacheGroups: {libs: {name: chunk-libs,test: /[\\/]node_modules[\\/]/,priority: 10,chunks: initial // only package third parties that are initially dependent},elementUI: {name: chunk-elementUI, // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: chunk-commons,test: resolve(src/components), // can customize your rulesminChunks: 3, // minimum common numberpriority: 5,reuseExistingChunk: true}}}}
}cacheGroups是splitChunks里面最核心的配置splitChunks就是根据cacheGroups去拆分模块的。 配置完成以后在进行打包模块就会进行分包。如下图 这时候当你进入某个页面用到某个模块的时候对应的模块包才会进行加载实现按需加载这样能大幅优化首屏加载缓慢的问题。
