webpack / vite

概念

• 模块打包工具（model bundler）
• module - 源码文件 ~ 图示左
• chunk - 多个文件合成的模块 ~ 图示中
• bundle - 最终输出文件 ~ 图示右

---

SPA单页面应用优缺点

• 优点：良好交互体验、不需重载整个页面、数据异步获取、前后端分离，减轻服务器压力（输出数据即可）
• 缺点：
  • 首屏加载慢 ~ 解决方案：路由懒加载，CDN，异步组件，SSR
  • 不利于SEO ~ 解决方案：服务端渲染，预渲染，h5 history

---

Es Moudule、commonjs

• es Moudule 静态引入 / 编译引入 ~ import / export / export default ~ 支持 tree-shaking
• commonjs 动态引入 / 执行引入 ~ require() / module.export

---

require 导入模块步骤

• 相对路径转换为绝对路径
• 查看缓存
• 读取文件代码， 优先考虑 js， js / json 可省后缀、其他文件当作 js 处理
• 包裹函数执行并缓存

---

安装

• 全局安装 ：npm install webpack@version webpack-cli@version -g（不推荐）
• 局部安装 ：npm i -D webpack@version webpack-cli@version（推荐）
• 查看所有版本：npm view webpack versions
• 查看安装版本：webpack -v webpack-cli -v （全局环境）/ npx webpack -v npx webpack-cli -v （当前环境）

---

npx

• npx 用于执行安装在本地项目中的可执行文件
• npx mrm 是执行项目脚手架任务的命令
• npx msw 是一个用于模拟服务端的工具，它是 Mock Service Worker（MSW）的命令行接口

---

webpack 常见性能优化

• scope Hosting：代码合并：使得体积更小、函数作用域更少、webpack 4 / 5 自动开启
• 图片 base64 压缩
• 组件懒加载
• babel-loader：缓存注入
• ignorePlugin：避免引入无用模块
• noParse：引入不打包
• happyPack：多进程打包
• parallelUglifyPlugin：多进程代码压缩
• CDN
• Dllplugin
• 热更新
• 自动刷新

---

Webpack Vite 不同点

• vite 开发环境使用 es6 Module 无需构建
• 生产环境使用 rollup