国产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:51:09
文檔

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網其它相關文章!

推薦閱讀:

JS對圖片進行黑白化設置

vue select組件開啟與禁用方法詳解

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

文檔

webpack打包文件體積超大解決思路

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

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国内精品一区二区三区 | 日韩精品在线观看免费 | 亚洲码欧美码一区二区三区 | 亚洲国产成人久久综合区 | 国产精品123 | 国产a精品| 欧美日韩精品一区二区三区 | 伊人久久精品一区二区三区 | 免费黄色网址在线观看 | 福利视频二区 | 成人国产激情福利久久精品 | 日本成本人观看免费fc2 | 性欧美大战久久久久久久野外 | 亚洲精品视频在线播放 | 欧美天天干 | 国产成人精品三级在线 | 在线看国产| 精品视频在线观看免费 | 91啪国自产在线高清观看 | 成人一区在线 | 日本激情一区二区三区 | 天堂va欧美ⅴa亚洲va一国产 | 日韩在线第二页 | 久久久久久亚洲精品影院 | 在线国产视频观看 | 91在线 一区 二区三区 | 国产日韩欧美一区二区三区视频 | 亚洲国产综合久久精品 | 99久久精品国产综合一区 | 欧美日韩一区二区三区在线观看 | 亚洲视频一二区 | 91精品国产91久久 | 国产一区二区精品久久 | 欧美极品第1页专区 | 国产美女精品久久久久中文 | 欧美一区2区 | 久久久久久综合一区中文字幕 | 日韩在线网址 | 国产区免费 | 亚洲 欧美 日韩 在线 | 国产超级乱淫片中文 |