webpack ​

loader ​

可以将不同类型的文件转换为模块（Module），使得Webpack能够通过import语句来引入这些文件，例如ES6、TypeScript、CSS、图片等等。同时，在转换过程中，还可以对文件进行一些处理，例如压缩、提取等等

plugin ​

可以通过钩子函数来对整个Webpack构建流程进行扩展和定制。例如，对于优化性能，可以使用UglifyJsPlugin来压缩输出文件总体积，通过SplitChunksPlugin来获取更好的缓存和加载性能；对于处理静态资源，可以使用ImageminPlugin来压缩图片，使用HtmlWebpackPlugin来自动将生成的JS、CSS等文件注入到HTML文件中

loader和plugin的区别 ​

• loader是用来加载某些资源文件
• plugin是用来扩展webpack的功能，是一个具有apply属性的js对象，通过webpack的钩子机制实现

针对不同项目优化 ​

在大型单页应用（SPA）中，应该有限考虑代码分割，使用异步加载的方式降低首屏渲染时间，对于多页应用（MPA）则可以使用SplitChunksPlugin进行资源拆分，减少冗余加载；对于响应式的应用程序，则应该考虑使用responsive-loader、postcss-px-to-viewport等插件来优化移动端的用户体验

构建流程 ​

• 初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数
• 开始编译：用上一步得到的参数初始化compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译
• 确定入口：根据配置中的entry找出所有的入口文件
• 编译模块：从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，递归直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译：在经过第四步使用loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及他们之间的依赖关系
• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

热更新原理 ​

• webpack-dev-server启动一个express服务器
• webpack编译打包生成bundle.js
• webpack-dev-server通过sockjs（websocket）和浏览器建立一个websocket长连接，将webpack编译打包的各个阶段的状态信息告知浏览器
• 当webpack检测到文件变化后，会重新编译打包，并将打包后的信息告知浏览器
• 浏览器根据收到的新模块代码，通过hot.replace对变更的模块进行替换，并且对变更的模块进行重新渲染

优化 ​

• 优化webpack的构建速度
  • 优化babel-loader的include和exclude，让其不要去处理不需要的文件
  • 使用HappyPack，将loader的同步执行转换为并行的
  • 使用DllPlugin和DllReferencePlugin预编译资源模块，将其打包成一个个单独的动态链接库，再通过DllReferencePlugin将其引入
  • 使用webpack-parallel-uglify-plugin开启多进程压缩js文件
  • 使用webpack.DllPlugin和webpack.DllReferencePlugin预编译资源模块，将其打包成一个个单独的动态链接库，再通过DllReferencePlugin将其引入
  • 使用webpack.DllPlugin和webpack.DllReferencePlugin预编译资源模块，将其打包成一个个单独的动态链接库，再通过DllReferencePlugin将其引入
  • 使用webpack.DllPlugin和webpack.DllReferencePlugin预编译资源模块，将其打包成一个个单独的动态链接库，再通过DllReferencePlugin将其引入
• 优化webpack的输出结果
  • 使用CommonsChunkPlugin提取公共代码
  • 使用webpack.optimize.ModuleConcatenationPlugin作用域提升
  • 使用Tree-shaking和UglifyJsPlugin去除无用代码和压缩代码
  • 使用webpack.optimize.AggressiveSplittingPlugin分割代码
  • 使用webpack.optimize.LimitChunkCountPlugin限制chunk的数量
  • 使用webpack.optimize.MinChunkSizePlugin限制chunk的最小大小
  • 使用compression-webpack-plugin开启gzip压缩
  • 使用extract-text-webpack-plugin分离css和js文件

vite ​

vite和webpack的区别 ​

• vite是基于浏览器原生ES imports的开发服务器，利用浏览器去解析import的模块，所以服务端不需要做任何额外的工作，只需要用koa等启动一个http服务器，然后把一切交给浏览器去处理
• webpack是一个打包工具，会将所有的资源模块打包成一个或多个bundle.js文件，浏览器不能直接运行ES Module，所以还需要一个翻译它们的工具，比如babel，将ES Module转换成CommonJS，再运行在浏览器中