本文的前提是前端要拿到服務(wù)器權(quán)限潦闲，但是在大部分二三線城市來(lái)說(shuō)，能給前端服務(wù)器的公司少之又少
在上一章chunk中提到，可以將第三方包提取出來(lái)邪意，每次打包的時(shí)候掘譬，如果沒(méi)更新，就不會(huì)改變hash
但是當(dāng) app1和app2 都依賴(lài)于react16.12.0的時(shí)候飒房，我并不希望react打包在任何項(xiàng)目中并生產(chǎn)出攜帶hash的js包
而是應(yīng)該在app1訪問(wèn)的時(shí)候加載好react搁凸，當(dāng)用app2訪問(wèn)的時(shí)候，直接調(diào)用本地緩存狠毯，而不是再次請(qǐng)求hash文件
1.解決公共部分
我們拿react當(dāng)例子
這里我們用到externals關(guān)鍵字
修改webpack.prod.ts
...
externals:{
'react':'React',
'react-dom':'ReactDOM'
}
...
在template.html中加入护糖，官方文件的script標(biāo)簽
...
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
npm run build
這樣我們就將第三方包，完整的從項(xiàng)目中抽離
2.有的時(shí)候官方提的東西嚼松，并非時(shí)時(shí)刻刻可靠嫡良，在某些場(chǎng)景下，需要我們自己提供
建立自己的靜態(tài)服務(wù)器惜颇，這個(gè)是node的
const path = require('path');
const Koa = require('koa');
const send = require('koa-send');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get(['/', '/**'], async (ctx) => {
await send(ctx, ctx.path, {
root: path.join(__dirname, 'dist'),
maxAge: 365 * 24 * 60 * 60 * 1000
});
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(5000);
在dist下放入所有app都可依賴(lài)的js css文件皆刺，這樣就可以做到app中減少頻繁請(qǐng)求的數(shù)量
靜態(tài)服務(wù)器建議選用nginx，但是在實(shí)測(cè)中凌摄，node同樣可以支持高并發(fā)羡蛾，首先消耗掉的是帶寬而不是并發(fā)，況且后續(xù)也有cdn服務(wù)锨亏，基本不會(huì)造成瓶頸
這里就不寫(xiě)nginx靜態(tài)服務(wù)相關(guān)了痴怨，在demo中有docker-compose相關(guān)的范例
