基于CommonsChunkPlugin,webpack打包优化
2018-02-21 19:54
736 查看
前段时间一直在基于webpack进行前端资源包的瘦身。在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html。但是打包的文件还是很大,特别是通过CommonsChunkPlugin的async:true打包的chunk的公共包不可控。今天就通过CommonsChunkPlugin插件的理解,来优化这个问题
问题描述详细些,我们的打包是基于router进行的chunk分割,比如router有10个,router1,router2用到了echart,所以echart打包到了公共文件async中。但是如果用户通过链接,
第一次直接访问的router3,这样就会先加载公共文件async,可是echart代码其实是多余的,影响到了router3的展现。
一开始遇到这个问题,没想到太好的方法,让echart基于chunk进行按需打包~~实在没办法,最后只能从CommonsChunkPlugin插件的源代码入手,看看有什么启发。
apply(compiler) { compiler.plugin("this-compilation", (compilation) => { compilation.plugin(["optimize-chunks", "optimize-extracted-chunks"], (chunks) => { /** * 根据chunkNames[options.name, options.names],从chunks中筛选出targetChunks, 没有则使用compilation.addChunk新增 * 如果children || async,返回targetChunks = chunks */ const targetChunks = this.getTargetChunks(chunks, compilation, this.chunkNames, this.children, this.async); targetChunks.forEach((targetChunk, idx) => { /** * 根据selectedChunks【options.chunks】,从chunks筛选出affectedChunks * async || children,返回 affectedChunks = targetChunk.chunks, 如果children = true,进行深度遍历 */ const affectedChunks = this.getAffectedChunks(compilation, chunks, targetChunk, targetChunks, idx, this.selectedChunks, this.async, this.children, this.deepChildren); let asyncChunk; if(this.async) { //如果async==string,进行name筛选 asyncChunk = affectedChunks.filter(c => c.name === this.async)[0]; if(!asyncChunk) { /** * 根据async创建一个新的chunk,和targetChunk绑定关系 * asyncChunk.addParent(targetChunk); targetChunk.addChunk(asyncChunk); */ asyncChunk = this.createAsyncChunk( compilation, targetChunks.length <= 1 || typeof this.async !== "string" ? this.async : targetChunk.name ? `${this.async}-${targetChunk.name}` : true, targetChunk ); } targetChunk = asyncChunk; } // 根据minChunks的设置,遍历affectedChunks的modules,返回符合条件的公共modules集合 const extractableModules = this.getExtractableModules(this.minChunks, affectedChunks, targetChunk); if(this.minSize) {// minSize限制逻辑 const modulesSize = this.calculateModulesSize(extractableModules); if(modulesSize < this.minSize) return; } // affectedChunks中移除extractableModules中modules的关系,只返回存在公共modules的Chunks集合(removeChunk返回true) const chunksWithExtractedModules = this.extractModulesAndReturnAffectedChunks(extractableModules, affectedChunks); // 公共的modules 和 targetChunk 绑定关联关系 // chunk.addModule(module); module.addChunk(chunk); this.addExtractedModulesToTargetChunk(targetChunk, extractableModules); if(this.filenameTemplate) targetChunk.filenameTemplate = this.filenameTemplate; if(this.async) { //被移除modules的Chunk,设置和targetChunk的关系,需要第一个加载targetChunk才能加载chunksWithExtractedModules this.moveExtractedChunkBlocksToTargetChunk(chunksWithExtractedModules, targetChunk); asyncChunk.origins = this.extractOriginsOfChunksWithExtractedModules(chunksWithExtractedModules); return; } //设置affectedChunks和targetChunk的parent关系 this.makeTargetChunkParentOfAffectedChunks(affectedChunks, targetChunk); }); return true; }); }); }
代码逻辑不是很复杂,主要是chunks之间的关系和chunks与modules之间的关系该怎么去维护,对于不清楚webpack打包机制的人,很难一时间了解。其实我也不很了解。
根据上面我的中文注释,对大家的了解有一些帮助。我们会发现,对我们的问题没有什么直接关系。
回到我们的问题,异步的模块中,共用模块怎么能再进行拆分,把大模块echarts,ace编辑器等进行分开打包,并且能自己处理关系,需要的时候才异步加载进来?
其实最后问题的答案很简单,需要实现自动异步加载,那肯定还是要借助CommonsChunkPlugin的async,我们可以根据实际情况,通过minChunks,把echarts,ace这种大库先进行一次async打包,这样再进行根据router的async打包的时候,自然不会再有echarts,ace了,看下现在的配置
new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'libs', 'manifest'] }), new webpack.optimize.CommonsChunkPlugin({ async: 'brace', minChunks: function(module, count) { var path = `/public/node_modules`; var resource = module.resource; if ( resource && ( resource.indexOf(`${path}/_brace`) !== -1 || resource.indexOf(`${path}/brace`) !== -1 ) ) { return true } return false; } }), new webpack.optimize.CommonsChunkPlugin({ async: 'echarts', minChunks: function(module, count) { var path = `/public/node_modules`; var resource = module.resource; if ( resource && ( module.resource.indexOf(`${path}/_echarts`) !== -1 || module.resource.indexOf(`${path}/echarts`) !== -1 || module.resource.indexOf(`${path}/zrender`) !== -1 || module.resource.indexOf(`${path}/_zrender`) !== -1 ) ) { return true } return false; } }), new webpack.optimize.CommonsChunkPlugin({ async: 'async', minChunks: 2 }),
相关文章推荐
- webpack性能优化 —— CommonsChunkPlugin
- webpack CommonsChunkPlugin 提取公共代码
- webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)
- 详解基于DllPlugin和DllReferencePlugin的webpack构建优化
- [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
- webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
- webpack CommonsChunkPlugin详细教程
- [Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin
- webpack中CommonsChunkPlugin详细教程(小结)
- webpack CommonsChunkPlugin详细教程
- webpack常用loader和plugin及打包速度优化
- 深入浅出的webpack构建工具---webpack3版本的CommonsChunkPlugin详解(六)
- Webpack CommonsChunkPlugin 理解
- webpack进阶——DllPlugin优化打包性能(基于vue-cli)
- 用webpack的CommonsChunkPlugin提取公共代码的3种方式
- Webpack CommonsChunk Plugin
- webpack CommonsChunkPlugin详细教程
- webpack.optimize.CommonsChunkPlugin插件的使用
- webpack3最新版本配置研究(四) devtool,webpack-dev-server,CommonsChunkPlugin
- webpack 2.x 之 CommonsChunkPlugin