webpack优化

最新推荐文章于 2025-04-18 22:15:20 发布

jll_rogen

最新推荐文章于 2025-04-18 22:15:20 发布

阅读量123

点赞数

文章标签： webpack

版权

webpack 优化

在代码编写的时候不会文件的绝对路径写上去, 一般会用简写, 让代码更加好看, webpack在编译的时候回根据配置去和代码里面的写的路径去解析真正的文件路径.

优化 resolve.modules
resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块，resolve.modules 的默认值是 node_modules，含义是先去当前目录下的 ./node_modules 寻找，没有找到就去上一级目录中找，一路递归；
优化resolve.alias
resolve.alias 配置项通过别名来把原导入路径映射成新的导入路径，减少耗时的递归解析操作；
优化resolve.extensions
在导入语句中没带文件后缀时，webpack 会根据 resolve.extensions 自动带上后缀去尝试询问文件是否存在，所以配置 resolve.extensions 应注意：
1. resolve.extensions 列表要尽可能小,不要把不存在的后缀添加进去；
2. 高频后缀名放在前面，以便尽快退出查找过程；
3. 在写代码时，尽可能带上后缀名，从而避免寻找过程。
优化resolve.mainFields
有一些第三方模块会针对不同环境提供几份代码，路径一般会写在 package.json 中。webpack 会根据 mainFields 中配置去决定优先采用哪份代码，只会使用找到的第一个。

优化 module.noParse 配置
module.noParse 配置项可以让 webpack 忽略对部分没采用模块化的文件的递归处理
优化 loader 配置
使用 loader 时可以通过 test、include、exclude 三个配置项来命中 loader 要应用规则的文件；
使用IgnorePlugin
webpack 的内置插件，作用是忽略第三方包指定目录。例如: moment (2.24.0版本) 会将所有本地化内容和核心功能一起打包，我们就可以使用 IgnorePlugin 在打包时忽略本地化内容。
使用external
如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。

使用cache-loader
在性能开销比较大的 loader 之前添加此 loader，以将结果缓存到磁盘
使用 DllPlugin DllReferencePlugin 以及 AutoDllPlugin
将项目中不经常变动的模块预先打包, 第二次就不会对这些模块进行打包压缩了
使用HardSourceWebpackPlugin
HardSourceWebpackPlugin 为模块提供中间缓存，缓存默认的存放路径是: node_modules/.cache/hard-source。已经取代了DLLPlugin

使用HappyPack
可以将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展为多进程的模式，从而加速代码构建。
使用thread-loader
把这个 loader 放在其他 loader 之前，放置在其之后的 loader 就会在一个单独的 worker【worker pool】池里运行，一个 worker 就是一个 Node.JS 进程，每个单独进程处理时间上限为 600ms，各个进程的数据交换也会限制在这个时间内。