mode与optimization

webpack 提供 mode 的配置项,以告知 webpack 使用相应环境的内置优化。
webpack4 开始,会根据选择的 mode 来执行不同的优化,不过所有的优化都可以手动配置和重写。
下面就介绍一下 webpackmodeoptimization 配置。

1. mode

mode,即模式。webpack 存在三种模式,developmentproductionnone(不推荐使用)。
如果没有配置 modewebpack 会将 mode 的默认值设置为 production

2. optimization

地址:https://webpack.docschina.org/configuration/optimization/

下面是 webpack 的默认优化策略,可以根据这些配置进行手动配置与优化。

通用优化

适用于开发环境和生产环境。

1. optimization.removeAvailableModules: true
如果模块已经包含在所有父级模块中,告知webpack从chunk中检测出这些模块,或移除模块。

如果已经在父级模块中成功打包了功能模块,那么这些模块将会被移除。
2. optimization.removeEmptyChunks: true
如果chunk为空,告知webpack检测或移除这些chunk。

如果chunk内容是空的,那就移除它。
3. optimization.mergeDuplicateChunks: true
告知webpack合并含有相同模块的chunk。

合并相同模块的chunk。即如果两个chunk引用相同的模块,合并成一个chunk。

development优化

适用于开发环境。

1. optimization.providedExports: true
高效的导出 export { A, B } from 'module' 的模块。

如果A、B没有使用,导出导出是无效的。
如果A、B使用过且没有修改,导出是无效的。
如果对A和B修改过再导出,是有效的。
import { A, B } from 'module'; export { A, B }
2. optimization.splitChunks: true
寻找chunk中共享的模块,抽离后生成单独的chunk。

和我们提取工具类的思想是一致的。

chunk index.js - module  

a - module -> 依赖 f(test)
c - module
d - module -> 依赖 f(test)
e - module

f(test)是一个共享模块,被抽离出来,形成单独的chunk,叫做common chunk。
3. optimization.runtimeChunk: true
webpack的运行时代码创建单独的chunk。

打包的过程中会生成webpack打包必须要临时用的代码。
这些代码会单独生成chunk,为打包过程服务。不参与到本身打包文件,不会影响原本程序。

可以单独为每一个文件设置指定名称的chunk文件,或者使用默认配置,自动生成chunk文件。
// runtimeChunk: true/false runtimeChunk: { name: entrypoint => `runtime~${entripoint.name}` }
4. optimization.noEmitOnErrors: true
编译时错误不写到输出文件中,true代表不会输出的文件中。
5. optimization.namedMoudles: true
增加可读的模块标识,以便于更好的调试。开发模式时该配置默认为true。
6. optimization.namedChunks: true
增加可读的chunk标识,以便更好的调试。

production优化

1. optimization.flagIncludedChunks: true
被包含的子chunk已经加载完成,就不再重新加载。
2. optimization.occurrenceOrder: true
按照顺序排列模块,得到最小的初始包。

递归解析,分组后形成chunk,按照顺序排序(分析模块,保证每一部分是最优解)。
3. optimization.sideEffects: true
webpack可以识别package.json中的sideEffects项,可以删除多余的导出项。

sideEffects(副作用),本不是webpack本身的配置,而是配合tree shaking生成。

依赖:optimization.providedExports
import { tplReplece } from './libs/utils'; // libs/utils/tplReplace
4. optimization.usedExports: true
确定每个模块导出项(exports)的使用情况,为了最小优代码体积。

未用到的导出项目(exports)会被删除。

依赖:optimization.providedExports
5. optimization.concatenateModules: true
把一些代码片段安全的合并为一个模块。

有一些纯函数可以单独形成模块,使用的时候,再进行打包的处理。

依赖:optimization.providedExports、optimization.usedExports
6. optimization.minimize: true
使用uglify-js压缩代码。

webpack内置uglify-js,不是webpack-uglify-js的插件。

3. 总结

以上就是关于 modeoptimization 相关的配置总结。希望对大家有所帮助。