webpack

wenpack 资料

中文官网 https://www.webpackjs.com/ (opens new window)

• Webpack 知识图谱及原理解析 https://tsejx.github.io/webpack-guidebook/ (opens new window)

• 深入浅出 Webpack

https://webpack.wuhaolin.cn/ (opens new window)

• webpack 源码解析 https://github.com/lihongxun945/diving-into-webpack (opens new window)

webpack5 和 webpack4 区别

1. 构建优化

2. 性能优化

webpack5 内部内置了 cache 缓存机制

参考：https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/ (opens new window)

如何提高 webpack 的构建速度

1. 优化 loader 配置

2. 合理使用 resolve.extensions

3. 优化 resolve.modules

4. 优化 resolve.alias

5. 使用 DLLPlugin 插件

6. 使用 cache-loader

7. terser-webpack-plugin 启动多线程

8. 合理使用 sourceMap

主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手