记一次webpack 打包优化

场景

我们公司所有产品的后台都是在一个前端项目中，so 我们的项目越来越大。从开始打包的几个文件，几分钟到后来几百个文件，20多分钟。这个当然不能忍了。 目前打包打包出来有201个文件，

优化前

time: 1000s~1200s total size: 112291323 B

| size | file | | – | – | |1405578 | 011d3b0dc115e2ef0dae.async.js| |569754 | 05aa3325b981700333d7.async.js| |1048157 | 05e5fc19fff54bb524c8.async.js| |395192 | 0636dedd9830ecc2eefe.async.js| |367873 | 07885f481aebbad1b60d.async.js| |316387 | 07c4630feb88a55435f1.async.js| |449770 | 080ade662b7adff1346e.async.js| |582824 | 08762aba4c3d4aca77df.css| |557437 | 0882b9cfbcff727e0717.async.js| |458852 | 0a379ca4fde06b2d6442.async.js| |553569 | 0b7c474e33141d179b31.async.js| |283808 | 0ce98b914f462dd6860d.async.js| |464103 | 0ddb380dee6409ef3e8d.async.js| |364696 | 0ee07b26b71bf7fa7679.async.js| |1002908 | 0f09b312ef1090db9fff.async.js| |1051409 | 148f7d7dde6bebc6144b.async.js| |1162467 | 14c8ebbeaf80d81c6074.async.js| |336068 | 16ba6596ee625bbd8e41.async.js| |1049024 | 170fbf6904a89850647c.async.js| |138007 | 18639228bc865290ca81.async.js| |218365 | 18ac5defeb7a06bdf792.async.js| |401836 | 1faf9d88b2b8449e8ae4.async.js| |154707 | 1ffe1a8803ff73460a1a.async.js| |1062458 | 22bcdc9147a6d36b27b1.async.js| |216109 | 2374db5e798caebef0f5.async.js| |155396 | 247f3fe38dc145ad8947.async.js| |890959 | 27256d30d51ba0f2a76b.async.js| |287618 | 2791fb04329533111776.async.js| |771260 | 2842ab992b75391663f3.async.js| |728962 | 29935d0b9c7f910b6484.async.js| |157382 | 2bc420edb18b286746e9.async.js| |134557 | 2c1d0afe051b009347cb.async.js| |402348 | 2d3978af25432398144d.async.js| |213665 | 2ea28e26e9ef1d940746.async.js| |743637 | 2ead0d6ec9acb4a77375.async.js| |476627 | 2f6fbebabe5b1fe71dd2.async.js| |1588834 | 2fdba799857278035e5d.async.js| |935485 | 31373193a7e4ef0c1555.async.js| |551092 | 3203492863fb75932b60.async.js| |1058708 | 32551cf66951ebb7e6ed.async.js| |719656 | 33cd6cea2f2d944fbcab.async.js| |1488115 | 351c5260ad1010e1f407.async.js| |980288 | 36bd445f393004e23229.async.js| |1049523 | 36e3b1fc57d3f7cf1c5b.async.js| |336641 | 3701fe776987fcc784b9.async.js| |283638 | 3a371597da66102b4cc1.async.js| |203542 | 3cceaad361c122ac776b.async.js| |229851 | 3f65d196d9530bac9d40.async.js| |290561 | 402e453c9151b53d02f7.async.js| |555752 | 4049894815c7a1a7d1db.async.js| |552026 | 429371d2f75d7812c0d4.async.js| |287402 | 4321f5ac0b0445fb5045.async.js| |452808 | 4366cee8439f66603f59.async.js| |321480 | 4386cd39b756cfcb0b1f.async.js| |571138 | 454f8c38c0f56bccfa19.async.js| |430650 | 45cc33fb172ed977e3bf.async.js| |327740 | 4728e0ad56b2f66f0082.async.js| |210803 | 479ae7f5fcd77ef8b278.async.js| |320012 | 4825c764568434dabcb6.async.js| |165649 | 483172696bb438da1f5e.async.js| |281572 | 4960007c6a90d1b8ede3.async.js| |216546 | 4b0a36d3f86c36fb7d41.async.js| |517215 | 4d303ca769b614557213.async.js| |1005809 | 4de2cdd12c9350063ab5.async.js| |203731 | 5153f77928fa18140620.async.js| |1054950 | 517da7c4409c934aaf2f.async.js| |1047542 | 518afb3e9fa45f9e54ce.async.js| |310655 | 529f65773855364065e7.async.js| |324735 | 5410cfa5730b21dcf3ab.async.js| |445359 | 5502f2fc47c5ab6c9779.async.js| |1285125 | 55aac51fdbf2aee986b3.async.js| |276296 | 57ef2da071ff552e8263.async.js| |1129243 | 57f690ef1a81defb40d1.async.js| |54706 | 5a2a976e7cbc1dce3918.async.js| |577566 | 5a4972354747108af51a.async.js| |198924 | 5d699c302f6b095524eb.async.js| |197975 | 5e3b4a5ac7541c26158f.async.js| |1392627 | 5e40da56de609ddd0b0f.async.js| |539222 | 5e4643adfde9ea9e8c63.async.js| |746336 | 5ea5341a70be91a992e4.async.js| |578663 | 5ef775b8be0b1f1ddf04.async.js| |987178 | 5f65fcdf87e2b85248f0.async.js| |163245 | 61cafe9d2ab9264592c1.async.js| |279716 | 6230dee6d2c48725b5c1.async.js| |1231282 | 62339c435cee1ee73d18.async.js| |357246 | 640e1672517ee987cd21.async.js| |159302 | 688ecff7fe60c2bbd954.async.js| |1049096 | 6b4f9190a8841a770a97.async.js| |549524 | 6cc9eff9a41d47dcf0d6.async.js| |378980 | 6ed3767b939d8b5f8bdb.async.js| |1798781 | 6f0664759f5fc42d7ad9.async.js| |291097 | 6fb85ad6dc91881cff61.async.js| |1026064 | 720c8039b6771f7ba65e.async.js| |411971 | 741b7b76992de8a2efa7.async.js| |554259 | 744e115d5013abe0b4ae.async.js| |185414 | 7622e7699fdcbcdc8aea.async.js| |377800 | 77b6dbd86418f7e70c95.async.js| |989504 | 7a6333fd2e3a0fdb86e4.async.js| |5950 | 7b503c3e7cc54552b139.async.js| |327309 | 7bf8bb46abf71b4fb865.async.js| |346107 | 7d461b7bb9bdac9d1945.async.js| |300 | 7dc70609b347a68767e2.async.js| |990816 | 7e35e9a8bb6fb7e9e746.async.js| |150611 | 7fa31dbc23b33952af42.async.js| |330380 | 8074b2c237f30a10d054.async.js| |1182359 | 81b7f87abef0d14a40ba.async.js| |842077 | 82d930c888b53c3970ab.async.js| |164443 | 88a58ae3b56e1c65caba.async.js| |11996 | 88cf7c59f4decec848ec.async.js| |1595215 | 88fbb41cd3b3472d4e4f.async.js| |284601 | 8a21f48259302f223c6f.async.js| |552634 | 8bbeb567889a236196e2.async.js| |1067803 | 8c4f5f437b5d29f77d44.async.js| |305038 | 8c970bc9f7bc216aea98.async.js| |485114 | 8cf62c3a3a1c55f2ac11.async.js| |401979 | 8d0e94ec94a4c14b6b20.async.js| |568293 | 8dcbba5f6eaf3cdcd853.async.js| |745606 | 91b123e588857be2bf2f.async.js| |553855 | 91b3087afcd374357481.async.js| |709071 | 95afcbfbe402d795c4fd.async.js| |323271 | 963d42d183badfefd2e2.async.js| |581456 | 98d3f0dd589fa5ac652e.async.js| |325672 | 99611be188306ecfa77e.async.js| |354461 | 9c28590ebf7f2c6cfdd4.async.js| |1128428 | a06a8ed6846a41837e4b.async.js| |353477 | a338a777771fabdf2d94.async.js| |281685 | a4529b549a4d65be8945.async.js| |1340660 | a4c8a483f4f8012678ac.async.js| |382486 | a5637102700dd75a0ad6.async.js| |543255 | a578b8049f4dd2960d70.async.js| |154849 | a6e31054f8f2e5deabb4.async.js| |245929 | a9ac8d12fab5226caa47.async.js| |162011 | a9f17fab25c9cd65bdbd.async.js| |713622 | aa8321b33c0da11340fc.async.js| |1003040 | aa8feffc87caaa652b6a.async.js| |454322 | ab1e8994814e5b603e09.async.js| |473078 | aba1c8f4e6ff380a39c9.async.js| |989008 | ac303e60cbaeb35f986b.async.js| |166840 | b0bc256f87f12ee1974a.async.js| |163547 | b168f0d3370418e27a36.async.js| |137952 | b2b3d19897700a6b731d.async.js| |459432 | b37da593171fedad177d.async.js| |279087 | b3c67d17b6bfba553037.async.js| |320490 | baaa1d528f2286fda1e9.async.js| |947063 | bc3f07c46f5a6b115e5c.async.js| |634167 | bfffe2b582497157f9a6.async.js| |382930 | c221fd4522ae0934f79d.async.js| |451752 | c2798e55d06e0e6ee0ff.async.js| |318786 | c319f68324b399013ecd.async.js| |1128405 | c37839b01e387a05d629.async.js| |578205 | c416ad12ad0f87cf6979.async.js| |929912 | c56f2a2401c0e0c03ed7.async.js| |316155 | c60de918fe6c01773066.async.js| |518497 | c7b0fd7623f3011e4129.async.js| |550902 | c8a82cb6e516b635ced0.async.js| |514066 | ca82e21ba0fb9f069fad.async.js| |43829 | cadaaf6e22454e09ca94.async.js| |655254 | cb139928cc90b3e05468.async.js| |167721 | cb83a79cdc0bacf70241.async.js| |149518 | cd03688ef22ce7944efa.async.js| |364203 | cd098a1a0d18f25de1bb.async.js| |562035 | ce4ea4706ab584e1be6a.async.js| |138489 | d0fa44e20bd9b3ca3eb2.async.js| |281620 | d37412d6a3f087d3809a.async.js| |280257 | d397fb22635220682d46.async.js| |1056305 | d4348fdd01e9235ce55c.async.js| |283558 | d544ec103836e0596ba5.async.js| |346314 | d966b2730e128b00e718.async.js| |290839 | db6ed014ff9e22390a96.async.js| |459782 | dcb20e0ad0c273fbd875.async.js| |1254846 | de86cd5be9927503047b.async.js| |1054869 | dff261820b81f4b1ed5d.async.js| |1400714 | e27c1539d6f013e3c0a9.async.js| |1048836 | e304b2e5f379bdf202de.async.js| |311437 | e3071687935ee29e97d3.async.js| |734765 | e3771230e1bc691de9cd.async.js| |434520 | e3c612a6aacf055cf83d.async.js| |336840 | e3c67250571b671aba4d.async.js| |287999 | e49f8158efb1dbc93a10.async.js| |281454 | e76edc4d10b35be34570.async.js| |317442 | e845cc2e188831f94f6a.async.js| |265530 | e8d0989bf7563fc2faf7.async.js| |1056351 | ea5a6349fec962fb3eec.async.js| |437417 | eb1c72e1ee10d43e3233.async.js| |1624534 | ec775c1d3ef9db3b0600.async.js| |1053018 | ed086ab93fe6a2d81d6e.async.js| |172532 | ed4fd43f30c507dcf97d.async.js| |431213 | ee4c8c0499d549963780.async.js| |917610 | f10c3aec828c19a3b1e6.async.js| |1065146 | f2cf25ca708863c99fdd.async.js| |201137 | f30395a3f130fc8ea6b3.async.js| |579583 | f3476a9600f20232f004.async.js| |268172 | f3496534937ec7ce8b41.async.js| |2189102 | f699581161d3221f25b3.async.js| |159475 | f775f9cc9981669a3742.async.js| |554433 | fd206701aaa46e2031a0.async.js| |163717 | fd85b21e4f84dbfaf400.async.js| |375510 | fe07eef8e2ea13282184.async.js| |1003862 | ff52b7ad8560f105c452.async.js| |1672730 | index.bb1c4b54280de2f5bd5e.js| |1542 | index.html|

HappyPack 优化

time: 600s~700s total size: 58250744 B

| size | file | | – | – | |468489 | 016a916c67568165e2d0.async.js| |694899 | 0188ed424b7b23ed51db.async.js| |624226 | 02156ba5d60f041e1484.async.js| |686705 | 021b4eda7ebaae6556bf.async.js| |31937 | 075f09734cd36aa4a970.async.js| |696487 | 0c3bd4b99ff1b841a5f1.async.js| |517770 | 0c9257568904f82831bc.async.js| |12222 | 0e61de63c4ce0cdf73de.async.js| |24424 | 0fb4cf6adfe28d2ebbdf.async.js| |19649 | 123ccd011de9e115f3ad.async.js| |60297 | 12637db269d176efff0a.async.js| |446099 | 1457d316b2afae041fb5.async.js| |530983 | 1589517faaaee3feb446.async.js| |10017 | 15f221727b97721ae331.async.js| |119561 | 1664b56259cca1ea33b9.async.js| |174510 | 17250fb10ac5d87fa6bb.async.js| |33813 | 17e8df0a72c243599b6c.async.js| |1759990 | 18343459d7084a140bd9.async.js| |30196 | 1892fef1736fbb5c24dd.async.js| |251035 | 1bd24231c95f0084351a.async.js| |442921 | 1c5699cfdb74809f28cd.async.js| |528220 | 1e929557c0d1e46a4a3e.async.js| |913574 | 22a9810c6acb93ae437b.async.js| |105067 | 26576fc28cfe374d62ed.async.js| |51078 | 28649a3a93dbfaeb2830.async.js| |358952 | 2b4a7ea7601e8067f1fd.css| |15001 | 2cda866ee337bfea7a30.async.js| |446523 | 2d5ddb1eb13f1d54e156.async.js| |300495 | 2e9342836e1c5478808a.async.js| |102562 | 2ef06ad741b069f36da0.async.js| |19827 | 2efedb5ef5f49e898522.async.js| |8956 | 2f2d199644252e6d8b91.async.js| |13269 | 2f57a7a27c3b1076f286.async.js| |699676 | 2fc23309315d586fd4a6.async.js| |26828 | 31046891f9df2da8978f.async.js| |40697 | 32fc2c74d99558a56b1e.async.js| |68354 | 336e05eb541a67c9e485.async.js| |20200 | 34becfe894df3d625359.async.js| |158931 | 35108d11e79ab9f7f1a6.async.js| |694100 | 35c895223f2217b66a28.async.js| |709891 | 3647a130a362d2ce9622.async.js| |36740 | 36d52715dc0b951e4ac4.async.js| |1061675 | 372ae8d93eb7ff18d754.async.js| |8924 | 37afba00c409aa1a81b0.async.js| |691557 | 3bd69fe599c502552175.async.js| |26975 | 3bee46585d172e083d97.async.js| |10675 | 3cfbd276e91c61bac70f.async.js| |37186 | 3e716a1f00750c885287.async.js| |597182 | 410f3062c1cc4ba4d958.async.js| |17942 | 41fb199895dac725567f.async.js| |295527 | 432c01d5612b92eb1d34.async.js| |35579 | 43c5f5746b72996ea9d0.async.js| |32550 | 4476ac187dd991ad9fa2.async.js| |19822 | 48d6156c3706bee7e0fd.async.js| |81832 | 4901e85c9bc97a92ba7b.async.js| |605241 | 4a4209e93523ccf95f21.async.js| |451901 | 4b1cfaeed87c0111e4ce.async.js| |706047 | 4b29dc79d9028a0d358d.async.js| |100296 | 4b3033c973244f5d6c63.async.js| |50502 | 4cd535d3644b49e8e9e7.async.js| |35949 | 4ced1784a1286d935547.async.js| |72184 | 4f3eea4202b5e6771a6c.async.js| |442776 | 50ed42f4e9cd0834c27b.async.js| |29223 | 561725cc5b963fde0ac6.async.js| |156912 | 58dad70ed01d4a0241e6.async.js| |1259624 | 5951566a2f4e178c4b1a.async.js| |616156 | 601ecdedd616ce5fe08e.async.js| |9897 | 60b15dce43d498b90d74.async.js| |17461 | 6164a9b07b9393fb8e7f.async.js| |688087 | 618992f15ff1e16ea663.async.js| |174599 | 62e3ebb127c5a7268e22.async.js| |51867 | 638b6731d41d0866cfee.async.js| |1297824 | 64569eca42c9dc8f6122.async.js| |265093 | 655332234696e0d21124.async.js| |187869 | 658d31898d1e6d20ff97.async.js| |594735 | 69e4d12d015cafbd3bd2.async.js| |22788 | 6c233aae1cd844facc5b.async.js| |489890 | 6c84d69bdc7a868a5d82.async.js| |56717 | 71348dadcb103376bb71.async.js| |47120 | 7219bdff1ae01a4ae4c9.async.js| |19589 | 731020220d5faa887903.async.js| |38747 | 746e5efc2b9ae9d9f537.async.js| |453261 | 74ea61aab92866e5c735.async.js| |687349 | 76ba80a7276f8ed4dea7.async.js| |16843 | 79527a95c47975b5942d.async.js| |30755 | 7abd3c03df4d580a9574.async.js| |697234 | 7c84c7b12fcaaf3a3abe.async.js| |1563 | 7c989f126c0ef0ab44c0.async.js| |199843 | 7cab83c27b46b495fb45.async.js| |190108 | 7dcd0144609c805ad48f.async.js| |83841 | 7e57cbbf078945a476df.async.js| |179708 | 8187b884a5c3593aa8ba.async.js| |14843 | 8199f5ce506cdfafabc1.async.js| |460374 | 83239dcfa3226783f639.async.js| |179260 | 836c2e21c7f1a1e9f2f1.async.js| |189121 | 85ef7ebe96f59b86edca.async.js| |16285 | 86d199b827c3f44c82f8.async.js| |1133066 | 87646c84fe7ce94bc7a1.async.js| |135729 | 8b8260cce8b545d3eecf.async.js| |1359619 | 8e2dc786eabbba4b1863.async.js| |75616 | 8f227fcdc34f55396a53.async.js| |21730 | 90ca584e574261c48e80.async.js| |31844 | 9815239a7f8c4454b911.async.js| |44829 | 9839ff41faafab8544f1.async.js| |20116 | 9a0e0cfc9985e402dd0f.async.js| |188689 | 9a770d5a685f5d3b88db.async.js| |52626 | 9bc395e4d4471ff0a1e4.async.js| |880408 | 9c11ee372015770fba7d.async.js| |34246 | 9d2c64a52751daecd668.async.js| |230785 | 9e7b336329a3169958ee.async.js| |48083 | 9edc96e1a9a1430692e8.async.js| |739886 | 9f0b60ece89723fb9d4b.async.js| |10636 | a0d3ee0690c7752e6899.async.js| |15156 | a16c1343796dd17d7602.async.js| |814988 | a216788535ad666b2282.async.js| |176964 | a36c3c92c9cf8ab80730.async.js| |937813 | a3ddb25a6fe6871b0c90.async.js| |695268 | a45d5a2d21ce17211146.async.js| |14745 | a5eaff669e7016824bb6.async.js| |63893 | a84fd8fa9f4462cfbbd6.async.js| |702714 | aaa80fe492995f4681a6.async.js| |688278 | abaa637bb4e4f02c8d9c.async.js| |180665 | abab3b775c2eadf5b9ed.async.js| |85566 | ac03ae4aa672c6b2cf9c.async.js| |18513 | accbfd745156d912d25e.async.js| |23711 | acd09d3848b6038354e1.async.js| |461758 | ad90b3631d703a4b7334.async.js| |392339 | addff1e9d3f9094e5f61.async.js| |138522 | adf70482bd20048e1915.async.js| |13876 | aee990074f26744ee2c3.async.js| |106809 | b0775925f75629610795.async.js| |23169 | b0b033139bccb18bd4cf.async.js| |178420 | b0bfa77d1046051d891c.async.js| |17721 | b10816ea0bde56a80b39.async.js| |448563 | b12e1b51529845aebe25.async.js| |603346 | b29ac101a189fcb6fc21.async.js| |23774 | b30a71db71e03ac26638.async.js| |22597 | b456b30d2dea7df881a2.async.js| |440482 | b46bc22aee6769259911.async.js| |176221 | b47798d5ebe0f53d1e3b.async.js| |710822 | b4f468b96076322c0ae5.async.js| |98796 | b5a9328969681b1c57a2.async.js| |10479 | b61248557063517d212d.async.js| |283 | b6c1009c11c946657e9f.async.js| |8043 | b7de3076a89365164d56.async.js| |78041 | b9d0de801900857c64bb.async.js| |99516 | baaa1c43f0e78ba7abfe.async.js| |23549 | bb21e62988f34223e38c.async.js| |69090 | bb35a0f76a25822ed44f.async.js| |82373 | bd2f775055afc8ff4465.async.js| |625616 | be652843634efc735c7d.async.js| |9208 | bef18baddfa21ff56048.async.js| |1067039 | c0a256ef300a7d7e0e66.async.js| |368043 | c29dc0ab137d30ba85a4.async.js| |65227 | c3c1e902d82619f525a9.async.js| |26848 | c448fe4b51f6f82f222d.async.js| |66868 | c49dbf86fc04a09863f1.async.js| |102970 | c550a7eb9a0d1f31653c.async.js| |200528 | c57c5b535d81adc8a6cf.async.js| |688862 | c68e38284b43134dccb5.async.js| |20016 | c74f5fe8c7be76e8fc64.async.js| |95886 | c84b0eb138ea5cbcbab6.async.js| |669761 | c8fd50e0c9aab191212f.async.js| |18713 | cb97e5483179ad725695.async.js| |24698 | cbad02ef91d33b7945d3.async.js| |47102 | ce7d713c0b50fa0a3829.async.js| |277890 | cee9dccfa820c1925469.async.js| |76632 | cf2b6a7ddf4a4d8a9cce.async.js| |444144 | cf547ea1b4f1d9ed848c.async.js| |762054 | cf7abb42337e58b7154f.async.js| |18658 | d02f599b253e0a196bbb.async.js| |444216 | d183c8cb0777be2d2736.async.js| |44943 | d3b1235951b026760195.async.js| |1052469 | d549ebb726ca7f520523.async.js| |19669 | d5f679454d53b90e0bc2.async.js| |1426945 | d6df8cf1863493ed2012.async.js| |600439 | d7d61e07f9baa04cfd2c.async.js| |618997 | d859c6ccdaef1d8a5fe0.async.js| |40206 | d8a5f2c20437e94378e5.async.js| |13370 | d9600ad7bd18e733d7f2.async.js| |36690 | dd9a82be304ae25823ac.async.js| |688212 | e04048a8004a001c70ad.async.js| |622368 | e20fb10b148f9377b1f0.async.js| |175891 | e60d1df7a9a5c542fa22.async.js| |86095 | e6c6413758e482c54b1e.async.js| |149957 | ed79a370ea5fd13944e3.async.js| |197892 | edfb1db90f25e2230bd6.async.js| |31977 | f0a014bfcecafa796748.async.js| |14879 | f30649dac2321cfaa410.async.js| |500155 | f479e70211186f73f464.async.js| |15164 | f49009790b8502dfe0f3.async.js| |770636 | f6661364f13df2c5976f.async.js| |302125 | f9931ce16b3b5ec87063.async.js| |59226 | fa2406a3617d8ee691f4.async.js| |238024 | fc487500a79c5c1ba635.async.js| |430652 | fcacf184beda9294ad5b.async.js| |36914 | fe9edac85d897d361042.async.js| |12157 | ff81d994b6319e5d011e.async.js| |129355 | ffd0ab8a6c8a5ac59135.async.js| |2396257 | index.496e8a74127b64a31f3a.js| |1534 | index.html|

结论

可见打包时间快了一倍，size 缩小了一倍。