Vite 分块优化 Vite 现在是越来越强大，无论是 Vue 工程，还是 React的工程，都可以体验 Vite 极速的服务启动。开发环境下，使用原生 ESM 文件，无需打包。在生产环境下，Vite借助 Rollup 来打包的，所以和其他打包工具一样，也有一个优化的问题。本文就来说说 Vite 工程怎样优化分块，因为我们很在乎打包后的文件大小。

Vite React 项目中使用 JavaScript 先前的 React 项目是基于 CRA + JavaScript的，直接在 js 中书写 jsx 语法。最近将一个 这样的项目迁移到 Vite 2，结果测试时发现，使用 Vite 启动时就会抛出一堆问题，看过 Vite 官方文档的故障排除也没有提及此类问题。

怎样不输出 CRA 工程的 sourceMap 文件 使用 Create React App 创建的单页应用生产环境下默认会使用 sourceMap 文件，这些文件一般很大，最好不要将它们部署到服务器上。当然，我们可以手动删除已经输出的文件，高级一点还可以使用一个 node 程序来批量删除。但能不能简单一点，通过 webpack 不输出 sourceMap 文件呢？Create React App 这个工具链是官方推荐的的最佳方式，不过默认下它隐藏了 Webpack，无法直接修改配置，因此我们想自定义一些配置比较麻烦。目前能自定义的方式主要有：一、使用 eject在 package.json 中很容易找到该命令，运行该命令会还原 react-scripts 隐藏的 Webpack 配置，通过 Webpack 配置文件我们就可以随心所欲地自定义了。注意，该过程是不可以逆的，会生成很多工程文件。小心使用为妙！二、使用 config-overrides.js这是一种通过覆盖 webpack 原有默认配置的方式一定来自定义的方式。1. 安装依赖npm i -D react-app-rewired customize-cra2. 修改 package.json 脚本"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-scripts test --env=jsdom" ... }3. 设置 config-overrides.js比如我们要在生产环境不输出 sourceMap 文件，可以在项目的根目录下新建 config-overrides.js，然后这样定义：const { override } = require('customize-cra'); module.exports = override( (() => (config, env) => { if (env === 'production') { config.output.publicPath = ''; config.devtool = false; } return config; })() )运行 npm run build 后会发现，确实不会输出 js 的 sourceMap 文件，但 CSS 的 sourceMap 文件依然照输不误。尝试使用 customize-cra 插件的其它方法也无功而返。直到我仔细阅读了 Create React App 文档，最终找到了办法。三、使用 .env项目的根目录下新建 .env.production，该文件只对生产环境有效，然后这样定义：GENERATE_SOURCEMAP = false运行 npm run build 后，JavaScript、CSS 的 sourceMap 文件都不会输出。一切都安静了，真好！参考https://create-react-app.dev/docs/advanced-configuration

Single-spa 简介 最近，我负责建立一个门户，用于整合公司的内部工具并为用户提供统一的界面。在这个过程中，我发现了微前端的世界。本文旨在记录我对微前端的学习以及如何使用一种流行的微前端框架 single-spa 来实现这样一个应用程序。

Webpack Module Federation Module Federation（模块联邦）是 Webpack 5 中最令人激动的功能之一，被认为是 JavaScript 架构的变革者。它支持在 JavaScript 应用程序之间更独立、更简单地共享代码，使应用程序更具适应性和动态性。