JS 模块化与打包工具

一、模块化体系:ESM vs CJS 深入

1.语法与静态性

(1)ESM:静态语法,可被打包器做 Tree-shaking

复制代码
  export function play() {}
复制代码
  export default ...
复制代码
  import { play } from './mod.js'

(2)CJS:运行时 require() , 分析能力弱,不利于 Tree-shaking

2.Node 解析规则

(1)package.json 有 "type": "module" → .js 当 ESM,CJS 用 .cjs

(2)没有"type":"moudle" → .js 当 CJS,ESM 用 .mjs

(3)ESM模式下导入需带后缀:import './mod.js'

3.互操作常见坑

(1)从 CJS 默认导出到 ESM: import pkg from 'cjs-pkg' 可能需要 default ,视包而定

(2)ESM的顶层 await import() 可用于懒加载(浏览器需<script type="module">)

4.浏览器直载 ESM:<script type="module" src="/src/index.js"> 可工作,但生产一般仍用打包器做压缩/缓存/分隔

二、npm 与依赖管理

1.依赖分层

(1) dependencies : 运行时要用(浏览器/Node 产物实际需要)

(2) devDependencies:仅开发/构建/测试(如 webpack 、typescript )

2.版本策略:^1.2.3:允许次/补丁更新;~1.2.3:只允许补丁更新。线上稳定期可固定版本

3.脚本编排: build/dev/test/lint/format 统一入口,CI 直接调用,幂等可重试

4.锁文件:固定依赖树,保证本地与 CI 一致性;发布或回归时避免"幽灵问题"

三、打包器的价值与核心概念

1.为什么要打包

(1)体积与性能:压缩、去未用代码、缓存友好命名

(2)兼容性与生态:TS/SCSS/图片/字体/JSON 等统一处理与优化

(3)架构能力:代码分割(按需)、预渲染、资源内联/懒载

2.Tree-shaking:需要 ESM 静态导入;包需标记 sideEffects:false(或为有副作用文件列白名单)

3.代码分割

(1)静态多入口:

复制代码
entry: { app: '...', admin: '...' }

(2)动态导入:

复制代码
import('./scenes/scene1_birth')

→ 自动生成独立 chunk

4.缓存策略

(1)文件名包含 [contenthash] ,浏览器长期缓存;HTML/入口负责指向最新名

(2)依赖库与业务分离提升复用缓存命中率

四、Webpack 入门到实践要点

1.最小依赖

复制代码
  webpack
复制代码
  webpack-cli
复制代码
  typescript
复制代码
  ts-loader

2.基本配置点

复制代码
  entry/output

:指定入口、

复制代码
  filename: [name].[contenthash].js

  clean: true
复制代码
  resolve.extensions: ['.ts', '.js']
复制代码
  module.rules

复制代码
  ts-loader

处理

复制代码
  .ts
复制代码
  optimization.splitChunks: { chunks: 'all' }

拆公共依赖

3.动态导入分包

ts

复制代码
// 假设放在 src/index.ts
document.querySelector('#playScene1')?.addEventListener('click', async () => {
  const mod = await import('./scenes/scene1_birth'); // 产出独立 chunk
  mod.play();
});

4.副作用控制:

复制代码
  package.json

复制代码
  "sideEffects": false

(若确无副作用的模块),让未用导出被安全移除。

5.资源处理:简单可使用 asset/resource (内置)或拷贝插件,把 assets/ 拷到 build/assets/

6.HTML输出:html-webpack-plugin 自动注入最新 hash 脚本,避免手改文件名

五、Vite / esbuild 对比

1.Vite (推荐开发体验)

(1)Dev:原生 ESM + 极速 HMR

(2)Build:走 Rollup,分包/CSS/资源生态成熟

(3)TS支持好、配置轻

  1. esbuild (极快):打包速度快;复杂生态与 HTML 注入等需额外方案

3.Webpack(覆盖面最全):复杂/历史项目强;配置相对繁琐,Dev 体验不如 Vite

相关推荐
eqwaak01 分钟前
Python Pillow库详解:图像处理的瑞士军刀
开发语言·图像处理·python·语言模型·pillow
柯南二号10 分钟前
【Java后端】《Spring Boot Starter 原理详解》博客
java·开发语言·spring boot
歪歪10025 分钟前
如何在SQLite中实现事务处理?
java·开发语言·jvm·数据库·sql·sqlite
珍宝商店28 分钟前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
数据知道38 分钟前
Go基础:Go语言能用到的常用时间处理
开发语言·后端·golang·go语言
宋辰月1 小时前
echarts项目积累
前端·javascript·echarts
go_bai1 小时前
Linux--常见工具
linux·开发语言·经验分享·笔记·vim·学习方法
ajassi20001 小时前
开源 C# 快速开发(三)复杂控件
开发语言·开源·c#
醉方休2 小时前
TensorFlow.js高级功能
javascript·人工智能·tensorflow
郝学胜-神的一滴2 小时前
深入理解前端 Axios 框架:特性、使用场景与最佳实践
开发语言·前端·程序人生·软件工程