SaRAku的博客

众所周知，next的webpack打包实际上分成了两个部分，一个是服务器端、一个是客户端，我们这里的配置主要是针对客户端的配置。目的在于降低_app.js包大小，合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。

webpack5出于“开箱即用”的目的，将大部分曾经要使用插件的功能集成到了config配置中，因此用户只需要了解如何配置，即可达到优化目的，其中最常使用接触的配置是：webpack.optimization.splitChunks。

以极客时间《玩转Webpack》课程学习为主的记录笔记。

本文只专注于性能优化的这个部分。总体来说分为两个方面：第一是开发环境中主要优化打包速度，第二是线上环境中主要优化分包大小。

Vite在启动时会先做一些准备工作，比如对第三方模块进行预编译处理，然后在本地启动一个开发服务器dev server，在中间件中对请求的文件进行处理，大概处理流程如下：加载源文件、转化翻译成ESM可解析的文件，比如ts -> js, less -> css 等，分析源文件依赖，然后返回请求的js文件。vite利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，vite在启动的时候不需要打包，不需要分析模块的依赖和编译，因此启动速度快。模块解析、增加中间件、启动服务器。

由于webpack 本身只能打包commonjs规范的js文件，对css，图片等格式的文件没法打包，因此引入了Loader来帮助打包，Loader可以看作是一个各种类型的模块翻译器，将非js模块转化为webpack能识别的js模块，比如css-loader会把css文件最后打包成css.js。是一个包含了webpack环境的所有配置信息的对象，可以理解为webpack的实例，是全局唯一的，它内部包括options / loader / plugin的信息和 webpack 整个生命周期相关的钩子。

以极客时间《玩转Webpack》课程学习为主的记录笔记。

明天看

webpack中的懒加载代码原理解析：https://segmentfault.com/a/1190000020233387自己的理解写下来的，如果有不对的地方欢迎评论区探讨。懒加载的原理是利用了webpack的代码分割，它使用异步加载的方式去导入代码。webpack解析依赖的时候，遇到异步加载的载入方式就会将这段代码分割成一个单独的js文件，等到要动态导入的时候，webpack会构造一个script标签，由浏览器异步请求js文件导入。可以优化首屏加载，因为webpack会打包会默认只会生成一个bu

搭建和优化webpack的react项目参考教程： https://www.jianshu.com/p/04e436cf75ba遇到问题：1、webpack-dev-server 成功启动无渲染看看html内dom节点是否挂载JSX，是否引入了打包好的js资源。使用HtmlWebpackPlugin会自动把生成的bundle.js文件引入html内。通常来说，每个入口会生成本入口的依赖树图和chunk文件，一个入口对应一个chunk，而一个chunk对应一个Bundle，某个入口打包出来的b