国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

如何處理webpack打包體積大文件

來源:懂視網 責編:小采 時間:2020-11-27 19:46:11
文檔

如何處理webpack打包體積大文件

如何處理webpack打包體積大文件:這次給大家帶來如何處理webpack打包體積大文件,如何處理webpack打包體積大文件的注意事項有哪些,下面就是實戰案例,一起來看一下。優化對比 : 未優化前:index.html引入一個main.js文件,體積2M以上。 優化后入:index.html引入main.js、c
推薦度:
導讀如何處理webpack打包體積大文件:這次給大家帶來如何處理webpack打包體積大文件,如何處理webpack打包體積大文件的注意事項有哪些,下面就是實戰案例,一起來看一下。優化對比 : 未優化前:index.html引入一個main.js文件,體積2M以上。 優化后入:index.html引入main.js、c

這次給大家帶來如何處理webpack打包體積大文件,如何處理webpack打包體積大文件的注意事項有哪些,下面就是實戰案例,一起來看一下。

優化對比 :

  未優化前:index.html引入一個main.js文件,體積2M以上。

  優化后入:index.html引入main.js、commons.js、charts.js、other.js。以達到將main.js平分目的。每個文件控制300k以內.(如果高興100k也沒問題)

用到的一堆庫及工具:

vue、webpack、babel、highcharts、echarts、jquery、html2canvas******此去省略若干m代碼

問題:

  開發環境用webpack后發現單個js文件5m。

  生產環境借助vue-cli的webpack配置,減少到2m。

解決方案:

  搜索各種解決方案:require.ensure、require依賴、多entry、commonsChunkPlugin****此去省力若干方案

網絡類似下邊這種上解決方案太多了,但是都達不到預期效果

entry:{ 
 main:'xxx.js',
 chunks:['c1', 'c2'],
 commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js'] 
}
 
plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:2
}) 
}

最優解決方案:

entry:{ 
 main:'xxx.js'
}
 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
 // 下邊return參考的vue-cli配置
 // any required modules inside node_modules are extracted to vendor
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf(
 path.join(dirname, '../node_modules')
 ) === 0
 )
 }
}) ,
// 以下才是關鍵
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf(
 path.join(dirname, '../node_modules')
 ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
 )
 }
}) // 如果愿意,可以再new 一個commonsChunkPlugin
 
}

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

vue的select內置組件使用步驟詳解

React使用時避免重渲染

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

如何處理webpack打包體積大文件

如何處理webpack打包體積大文件:這次給大家帶來如何處理webpack打包體積大文件,如何處理webpack打包體積大文件的注意事項有哪些,下面就是實戰案例,一起來看一下。優化對比 : 未優化前:index.html引入一個main.js文件,體積2M以上。 優化后入:index.html引入main.js、c
推薦度:
標簽: 怎么辦 文件 處理
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 日产精品久久久一区二区 | 国产成人精品久久一区二区三区 | 久久亚洲精品国产亚洲老地址 | 综合 欧美 国产 视频二区 | 国产欧美精品区一区二区三区 | 久久精品国产99久久99久久久 | 午夜在线观看免费视频 | 久久亚洲不卡一区二区 | 国产人成久久久精品 | 国内精品视频免费观看 | 欧美精品专区免费观看 | 亚洲国产综合久久精品 | 欧美一区二区三区视频在线观看 | 欧美日韩国产va另类试看 | 国产成人免费高清激情明星 | 日韩精品小视频 | 香蕉午夜视频 | 国产一区在线看 | 亚洲视频在线播放 | 欧美成人一区二区三区在线视频 | 一级一级特黄女人精品毛片视频 | 欧美交配| 久久久久久91精品色婷婷 | 亚洲午夜久久久久中文字幕 | 午夜看一级特黄a大片黑 | 国产精品久久久久久永久牛牛 | 日韩高清dvd | 韩日一区二区 | 亚洲国产成人久久一区二区三区 | 欧美日本道免费一区二区三区 | 色综合91久久精品中文字幕 | 欧美日韩大尺码免费专区 | 欧美激情在线播放一区二区三区 | 亚洲一区二区免费视频 | 91频道| 一区二区在线观看高清 | 黄网站色视频免费观看45分钟 | 亚洲最新视频在线观看 | a毛片在线| 亚洲啪视频 | 91精品成人免费国产片 |