一.升級webpack4
1?? vender/menufest/app
app.js是入口js，vendor則是通過提取公共模塊插件來提取的代碼塊（webpack本身帶的模塊化代碼部分），而manifest則是在vendor的基礎(chǔ)上，再抽取出要經(jīng)常變動的部分，比如關(guān)于異步加載js模塊部分的內(nèi)容庭再。
vendor: ['react', 'react-router-dom', 'react-dom', 'react-redux']
2??啟用optimization
runtime 優(yōu)化持久化緩存的
, runtime 指的是 webpack 的運行環(huán)境(具體作用就是模塊解析, 加載) 和 模塊信息清單, 模塊信息清單在每次有模塊變更(hash 變更)時都會變更, 所以我們想把這部分代碼單獨打包出來, 配合后端緩存策略, 這樣就不會因為某個模塊的變更導(dǎo)致包含模塊信息的模塊(通常會被包含在最后一個 bundle 中)緩存失效. optimization.runtimeChunk 就是告訴 webpack 是否要把這部分單獨打包出來.
optimization: {
runtimeChunk: {
name: 'manifest'
},
// minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必須是數(shù)組，在production模式下使用到茄袖，見步驟4
splitChunks: {
chunks: 'all', //對哪些模塊進行優(yōu)化
minSize: 30000, //要生成的塊的最小大小渺贤。
minChunks: 1, //分割前必須共享模塊的最小塊數(shù)雏胃。
maxAsyncRequests: 5, //按需加載最大并行請求數(shù)
maxInitialRequests: 5, //入口點處的最大并行請求數(shù)。
name: false, //拆分塊的名稱志鞍。提供true將根據(jù)塊和緩存組密鑰自動生成名稱瞭亮。提供字符串或函數(shù)將允許您使用自定義名稱。如果名稱與入口點名稱匹配固棚，則將刪除入口點统翩。
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
priority: -10,
reuseExistingChunk: true,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(less|scss|css)$/,
chunks: 'all', // merge all the css chunk to one file
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
二 依賴的正確安裝
devDependencies用于本地環(huán)境開發(fā)時候。
dependencies用戶發(fā)布環(huán)境
其實看名字我也知道是這個意思此洲，我覺得沒解釋情況厂汗。
devDependencies是只會在開發(fā)環(huán)境下依賴的模塊，生產(chǎn)環(huán)境不會被打入包內(nèi)呜师。通過NODE_ENV=developement或NODE_ENV=production指定開發(fā)還是生產(chǎn)環(huán)境娶桦。
而dependencies依賴的包不僅開發(fā)環(huán)境能使用，生產(chǎn)環(huán)境也能使用汁汗。其實這句話是重點衷畦，按照這個觀念很容易決定安裝模塊時是使用--save還是--save-dev。
三 按需加載
1 使用 react-loadable 實現(xiàn)路由的動態(tài)加載
2.第三方庫的按需加載 知牌，如antMobile的按需加載霎匈，在.babelrc 中配置
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
"transform-runtime",
["import", { "libraryName": "antd-mobile","style": "css" },]
]
}
四 合理使用cdn
五 js腳本合理引用
1.盡量減少head中的script腳本
2.高德地圖api改為異步加載
const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = 'https://webapi.amap.com/maps?v=1.4.8&key=dfba0f951c70f029a888263a3e931d0a&callback=onLoad';
document.head.appendChild(jsapi);
