WebPack页面一多，打包起来就巨慢

Question

~/views$ls|wc-l18十八个页面，配置方面-webpack.config.jsvarpath=require('path')varwebpack=require('webpack')varExtractTextPlugin=require('extract-text-webpack-plugin')varentry_config=require('./webpack-config/entry.config')varplugin_config=require('./webpack-config/plugin.config')module.exports={entry:entry_config,//入口文件output:{path:path.join(__dirname,'dist'),publicPath:'/',//如果设置为/则需把dist下的文件放在项目的根目录filename:'static/js/[name].[hash].bundle.js',chunkFilename:'static/js/[id].chunk.js'},module:{rules:[{test:/\.css$/,use:ExtractTextPlugin.extract({fallback:'style-loader',use:[{loader:'css-loader'}],})},{test:/\.html$/,loader:'html-loader',options:{attrs:['img:src','img:data-src'],interpolate:'require'}},{test:/\.(png|jpg|gif|svg|ico)$/,loader:'url-loader',options:{limit:8192,//图片大于8K交给file-loader处理name:path.posix.join('static','[name].[hash:7].[ext]')}},{test:/\.(woff2?|eot|ttf|otf|cur)(\?.*)?$/,loader:'url-loader',options:{limit:8192,name:path.posix.join('static','fonts/[name].[ext]')}},{test:require.resolve('jquery'),loader:'expose-loader?$!expose-loader?jQuery',//先把jQuery对象声明成为全局变量jQuery，再通过管道进一步又声明成为全局变量$},]},plugins:plugin_config,devtool:'source-map',devServer:{host:'localhost',port:9999,overlay:{//在浏览器显示ESlint错误errors:true,warnings:true},proxy:{//代理'/api':'http://localhost:3000'}}}letentry_object={};//入口对象(function(dir_path){//dir_path=页面JS存放路径fs.readdirSync(dir_path).forEach(function(file){varfile_path=dir_path+'/'+file;//文件路径varfname=path.basename(file,'.js');//文件名entry_object[fname]=file_path;//赋值})})('./src/static/js');module.exports=entry_object;//导出varfile_obj={};varfile_path=dir+'/'+file;varchunk_name=path.basename(file,'.html');file_obj['filename']=file;file_obj['template']=file_path;file_obj['chuckName']=chunk_name;pagesArray.push(file_obj)}})}each_file('./src/views');module.exports=pagesArray;/*遍历页面，添加配置*/pagesArray.forEach((page)=>{consthtmlPlugin=newHtmlWebpackPlugin({favicon:'./src/static/favicon.ico',//站点icotemplate:page.template,filename:page.filename,chunks:['vendors',page.chuckName],});plugin_config.push(htmlPlugin)})module.exports=plugin_config;具体的代码可以看看Mooc或者webpack-mpa-template刚入门webpack，一些优化的点还请各位指点迷津这是什么都每一编译的过程18modulesChildhtml-webpack-pluginfor"course-single.html":19modulesChildhtml-webpack-pluginfor"course.html":23modulesChildhtml-webpack-pluginfor"index.html":19modulesChildhtml-webpack-pluginfor"member-achievements.html":12modulesChildhtml-webpack-pluginfor"member-courses.html":12modulesChildhtml-webpack-pluginfor"member-friends.html":AssetSizeChunksChunkNamesstatic/team_03.e45e21a.jpg21.7kB[emitted]static/team_02.e45e21a.jpg21.7kB[emitted]static/team_04.e45e21a.jpg21.7kB[emitted]15modulesChildhtml-webpack-pluginfor"member-messages.html":17modulesChildhtml-webpack-pluginfor"not-found.html":AssetSizeChunksChunkNamesstatic/pagebanner_03.3e2305b.jpg48.3kB[emitted]11modulesChildhtml-webpack-pluginfor"profile-edit.html":12modulesChildhtml-webpack-pluginfor"profile.html":AssetSizeChunksChunkNamesstatic/team_01.e45e21a.jpg21.7kB[emitted]12modulesChildhtml-webpack-pluginfor"register.html":AssetSizeChunksChunkNamesstatic/load.06a21cd.gif37.8kB[emitted]10modulesChildhtml-webpack-pluginfor"about.html":AssetSizeChunksChunkNamesstatic/team_03.e45e21a.jpg21.7kB[emitted]static/team_04.e45e21a.jpg21.7kB[emitted]static/load.06a21cd.gif37.8kB[emitted]static/pagebanner_03.3e2305b.jpg48.3kB[emitted]static/team_01.e45e21a.jpg21.7kB[emitted]static/team_02.e45e21a.jpg21.7kB[emitted][5]./node_modules/html-webpack-plugin/lib/loader.js!./src/views/about.html18.6kB{1}[built]+24hiddenmoduleswebpack:Compiledsuccessfully.

Answer 1

Thisistechnicallyabug,orperformanceissueinhtml-webpack-plugin.TheproblemisthatchildCompilationshavetobecreatedinwebpackforeachinstanceofthatpluginbeingused.
achildCompiler/childCompilation,isessentiallylikerunningwebpack_insideofanalreadyrunningparentinstanceofwebpack_.Therefore,withmanychildCompilersandcompilations,thebuildperformancesignificantlybeingstogetslowforeachadditionalinstance.
Waystoworkaroundthis:
Icreatedapre-buildscript(fordevelopment),whichlet'smefilteroutallbutxyzamountofentries.Thisway,Icanonlybuild2-4entriesinsteadof100-500andwillhavefasterbuildspeeds!
                            

Answer 2

搬运一个webpack支撑大规模应用开发最佳时间-AlloyTeam：全量编译时间26s优化到5s，压缩编译是啊金66s优化到19.5s。