詳解webpack 打包文件體積過(guò)大解決方案（code splitting）
優(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件，附加導(dǎo)航即粘貼在屏幕某處實(shí)現(xiàn)錨點(diǎn)功能，感興趣的小伙伴們可以參考一下2016-04-04
這里介紹的是網(wǎng)上比較流行的刷新頁(yè)面的代碼，整理的相對(duì)比較全了，這些知識(shí)都是前后臺(tái)結(jié)合過(guò)程中，經(jīng)常用的到的。2010-04-04
JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)代碼實(shí)例
在本篇文章里我們給大家分享了關(guān)于JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)的相關(guān)實(shí)例代碼，有需要的朋友們可以學(xué)習(xí)下。2018-10-10
JavaScript格式化數(shù)字的函數(shù)代碼
當(dāng)要格式化的數(shù)字為null、空或非數(shù)字時(shí)，返回的結(jié)果。默認(rèn)為02010-11-11
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表單生成
這篇文章主要來(lái)和大家一起深入探討如何使用JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)表單生成器,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
RequireJS 可以幫助用戶(hù)異步按需的加載 JavaScript 代碼，并解決 JavaScript 模塊間的依賴(lài)關(guān)系，提升了前端代碼的整體質(zhì)量和性能2017-04-04
使用原生js編寫(xiě)一個(gè)簡(jiǎn)單的框選功能方法
從表單校驗(yàn)看JavaScript策略模式的使用詳解