前后端分离系列-静态服务器

demo https://github.com/757566833/webpack-guide

本文的前提是前端要拿到服务器权限，但是在大部分二三线城市来说，能给前端服务器的公司少之又少

在上一章chunk中提到，可以将第三方包提取出来，每次打包的时候，如果没更新，就不会改变hash

但是当 app1和app2 都依赖于react16.12.0的时候，我并不希望react打包在任何项目中并生产出携带hash的js包

而是应该在app1访问的时候加载好react，当用app2访问的时候，直接调用本地缓存，而不是再次请求hash文件

1.解决公共部分
我们拿react当例子
这里我们用到externals关键字

基于webpack从0开始搭建react的ts开发环境系列

修改webpack.prod.ts

...
externals:{
        'react':'React',
        'react-dom':'ReactDOM'
    }
...

在template.html中加入，官方文件的script标签

...
<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

这样我们就将第三方包，完整的从项目中抽离

2.有的时候官方提的东西，并非时时刻刻可靠，在某些场景下，需要我们自己提供
建立自己的静态服务器，这个是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都可依赖的js css文件，这样就可以做到app中减少频繁请求的数量

静态服务器建议选用nginx，但是在实测中，node同样可以支持高并发，首先消耗掉的是带宽而不是并发，况且后续也有cdn服务，基本不会造成瓶颈
这里就不写nginx静态服务相关了，在demo中有docker-compose相关的范例