# note-webpack

**Repository Path**: peigenzi/note-webpack

## Basic Information

- **Project Name**: note-webpack
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-17
- **Last Updated**: 2021-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## tree-shaking

- package.json 中配置 sideEffects
- 使用 es6 模块语法
- 压缩代码

开发环境为了调试需要，会保留未用的代码

```shell
所有模块都要优化
sideEffects: false

css模块不优化
sideEffects: ["*.css"]

optimization: {
    usedExports: true
}
```

## 代码分割

- 同步代码：需要配置 splitchunks
- 异步代码(import)：需配合 babel 插件

## module

可以简单的理解为一个 export/import 就是一个 module。

module.id === require.resolve('./file.js')

根据模块排序方法计算的，这是因为每个 module.id 会默认地基于解析顺序(resolve order)进行增量（module 是全局的，是为了不同的入口文件，引入同一个 module 时可以使用缓存，而不必打重复的包）。也就是说，当解析顺序发生变化，ID 也会随之改变，极其不稳定。

缓存优化方案是固定 moduleId