我正在参加「掘金·启航计划」 项目创建 我们创建如图几个文件夹 main：主应用（采用vue3作为技术栈） react：子应用1 vue2：子应用2 vue3：子应用3 service：服务端代码 v

大家好，我是 simple ，最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)

前言 最近在做 B 端性能优化的工作，通过一些工具分析，发现我们项目构建出来的 JS Chunks 有数量偏多和部分 Chunks 体积偏大的情况。于是想要了解下通过 splitChunks 的配置是

想必大家都用过 webpack，也或多或少了解它的原理，但是不知道大家有没有写过 Webpack 的插件呢？ 今天我们就一起来写一个划分 Chunk 的 webpack 插件吧，写完后你会发现想怎么分

背景 大家在日常开发中应该经常会有需要切换不同环境地址的情况。当一个项目代码切换环境地址时，vue-cli没有能够感知文件的变化，所以代理的还是旧的地址，所以通常我们需要执行npm run serve

Webpack 一直都是有些人的心魔，不清楚原理是什么，不知道怎么去配置，只会基本的 API 使用。它就像一个黑盒，让部分开发者对它望而生畏。 而本节最大的作用，就是帮大家一点一点的消灭心魔。

所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

我们在自己搭建项目的时候，在打包构建的时候等待非常的枯燥，尤其是特别大不知道还要等多久才是最恐怖的，这时不妨找一款进度条插件，让我们不再焦躁下去，本期我们会推荐三款进度条插件给大家进行选择。