您好,登錄后才能下訂單哦!
優(yōu)化對(duì)比 :
未優(yōu)化前:index.html引入一個(gè)main.js文件,體積2M以上。
優(yōu)化后入:index.html引入main.js、commons.js、charts.js、other.js。以達(dá)到將main.js平分目的。每個(gè)文件控制300k以?xún)?nèi).(如果高興100k也沒(méi)問(wèn)題)
用到的一堆庫(kù)及工具:
vue、webpack、babel、highcharts、echarts、jquery、html2canvas******此去省略若干m代碼
問(wèn)題:
開(kāi)發(fā)環(huán)境用webpack后發(fā)現(xiàn)單個(gè)js文件5m。
生產(chǎn)環(huán)境借助vue-cli的webpack配置,減少到2m。
解決方案:
搜索各種解決方案:require.ensure、require依賴(lài)、多entry、commonsChunkPlugin****此去省力若干方案
網(wǎng)絡(luò)類(lèi)似下邊這種上解決方案太多了,但是都達(dá)不到預(yù)期效果
entry:{ main:'xxx.js', chunks:['c1', 'c2'], commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js'] } plugins:{ new commonsChunkPlugin({ name:'commons', minChunks:2 }) }
最優(yōu)解決方案:
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 ) } }) , // 以下才是關(guān)鍵 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 一個(gè)commonsChunkPlugin }
以上代碼打包出來(lái)的結(jié)果:main.js 、commons.js、charts.js
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。