# 七.webpack

# 1.webpack 打包文件体积过大？（最终打包成一个 js 文件）

1.异步加载模块
2.提取第三库
3.代码压缩
4.去除不必要的插件

# 如何优化 webpack 构建的性能

1.异步加载模块
2.提取第三库
3.代码压缩
4.去除不必要的插件

如何优化 webpack 构建的性能
- 1.减少代码体积
  - 1.使用 CommonsChunksPlugin 提取多个 chunk 之间的通用模块，减少总体代码体积
  - 2.把部分依赖转移到 cnd 上，避免每次编译过程都由 webpack 处理，
  - 3.对一些组件库采用按需加载，避免无用的代码
- 2.减少目录检索范围
  - 在使用 loader 的时候，通过制定 exclude 和 include 选项，减少 loader 遍历的目录范围，从而加快 webpack 编译速度
- 3.减少检索路径
  - resolve.alias 可以配置 webpack 模块解析的别名，对于比较深的解析路径，可以对其配置 alias

当系统面临大量用户访问，负载过高的时候，通常会使用增加服务器数量来进行横向扩展，使用集群和负载均衡提高整个系统的处理能力

我们把开发中的所有资源（图片、js、css）都看成模块，通过 loader 和 plugins 来对资源进行处理，打包成符合生成环节部署的前端资源

# 8.Webpack 性能优化

# 1.减少 webpack 打包时间

优化 loader 的文件搜索范围，将 babel 编译过的文件缓存起来

loader: "babel-loader?cacheDirectory=true"

1

# 2.happyPack:将 loader 的同步执行转换为并行的

# 3.DllPulgin:可以将特定的类库提前打包然后引入

# 4.代码压缩：mode 为 production 默认开启代码压缩

# 5.tree shaking：删除项目中未被引用的代码

# 有没有去研究 webpack 的一些原理和机制，怎么实现的

解析 webpack 配置参数，合并从 shell 传入和 webpack.config.js 文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听 webpack 构建生命周期的事件节点，以做出对应的反应。
从配置的 entry 入口文件开始解析文件构建 AST 语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据文件类型和 loader 配置找出合适的 loader 用来对文件进行转换。
递归完后得到每个文件的最终结果，根据 entry 配置生成代码块 chunk。
输出所有 chunk 到文件系统。