webpack5 的使用(六):优化

4,968 阅读3分钟

这是我参与更文挑战的第7天,活动详情查看: 更文挑战

前言

如果你坚持到了这个章节,就已经写好了一个比较完整的 webpack 项目了。不过,项目还缺少一些优化。

下面将从优化打包体积和优化构建速度两方面介绍 webpack 如何进行优化。

优化打包体积

mode 选择

mode 选择会影响到实际的打包体积,如:production 模式下会自动开启 tree-shaking(删除js无用代码)、TerserPlugin(压缩js代码)等等。根据不同的环境去选择合适的 mode,将有利于优化打包体积(其实对构建速度也有一定的影响)。

优化构建速度

选择性使用plugin/loader

根据不同的环境或模式去选择合适的plugin/loader。
比如:压缩 css 插件(css-minimizer-webpack-plugin)在 development 模式中根本不需要用到,那么在 development 模式配置里去掉这一插件的处理,可以提升构建速度。
简单来说,就是 plugin/loader 可以少用就尽量少用。

babel 缓存

上一篇文章已经说了,使用 cacheDirectory 开启缓存,这里不再复述。

devtool 选择

devtool 是一个调试选项,用于控制是否生成和如何生成 source map。devtool 的选择会影响到构建速度。

什么是 source map?

source map 即是一种映射文件,我们打包出来的 js 文件里面的代码都是各种 laoder 转换出来的代码,不是源码(原来代码的样子),source map 的作用就是将源码映射出来,就是解决控制台打印出来的代码应对应源码哪里,方便程序员进行调试。

想了解更多,可以看阮一峰写的文章

devtool 类型

devtool 类型有很多种,我就不一一列出来了,可以直接看官方文档。下面直接给出最佳选择。

最佳选择

在 development 模式里,建议使用 eval-source-map 和 eval-cheap-module-source-map,前者可以追踪到源码的行列,后者只能追踪到行,当然后者的构建速度会块一点。

在 production 模式里,建议使用 nosources-source-map,用这个进行调试程序是看不到任何的源码信息,只能看到信息来源与源码的第几行。

devtool 在 webpack 里这样配置。

webpack.dev.js

module.exports = merge(common, {
    ...
    devtool: 'eval-source-map',
    ...
}

webpack.prod.js

module.exports = merge(common, {
    ...
    devtool: 'nosources-source-map',
    ...
}

结语

当然,webpack 的优化远远不止上述这些(上面的都比较基础),还有各种各样的配置可以用上,比如:HappyPack,SplitChunksPlugin,动态导入。

参考文章

  1. webpack 构建性能
  2. webpack devtool
  3. 掘金的 “一文彻底搞懂webpack devtool”

另有 webpack 代码分离

强烈推荐看下以上的文章,都是优化 webpack 的重点。

系列文章

webpack5 的使用(零):概念
webpack5 的使用(一):起步
webpack5 的使用(二):多个环境配置
webpack5 的使用(三):加载 css
webpack5 的使用(四):加载资源文件
webpack5 的使用(五):babel 转译 js 代码
webpack5 的使用(六):优化