前后端分离系列

本系列不仅是文章，也会改动一些webpack的配置
基于webpack从0开始搭建react的ts开发环境系列

在webpack从0开始搭建react的ts开发环境系列中我们选用了koa做为一个前后端分离的前端服务器，

server.js

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();
// 匹配了所有url 
router.get(['/', '/**'], async (ctx) => {
  const url = ctx.path;
  await send(ctx, './index.html', {
      root: path.join(__dirname, 'dist'),
      maxAge: 1
    });
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000);

在我们简简单单打包了一个带antd且按需加载的组件以后，

image.png

已经接近了1m

在cache时间为1的时候，用户每次打开网站，都要加载js文件，但是我没有改动js文件的内容，这就造成了极大的浪费，还降低了用户的体验

接下来就是 缓存篇
前后端分离系列-缓存篇