前言
当我们的项目越来越大，webpack 的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高 webpack 的构建速度。
目录
缩小范围
noParse
IgnorePlugin
优化 resolve 配置
externals
缓存
缩小范围
在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如：
这样一来，一开始构建，我们就能去除一些选项，比如，在使用 babel-loader 的时候
{ test: /\.jsx?$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'], plugins: [[require('@babel/plugin-proposal-decorators'), { legacy: true }]], cacheDirectory: true, // 启用缓存 }, }, ], include: path.resolve(__dirname, 'src'), exclude: /node_modules/, },
复制代码
noParse
对于我们引入的一些第三方包，比如jQuery，在这些包内部是肯定不会依赖别的包，所以根本不需要 webpack 去解析它内部的依赖关系，使用 noParse 进行忽略的模块文件中不会解析 import、require 等语法
module：{ noParse：/jquery|lodash/}
复制代码
IgnorePlugin
有很多的第三方包内部会做国际化处理，包含很多的语言包，而这些语言包对我们来说时没有多大用处的，只会增大包的体积，我们完全可以忽略掉这些语言包，从而提高构建效率，减小包的体积。
用法
new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });
复制代码
以 moment 为例，首先找到 moment 中语言包所在的文件夹，然后在 webpack 配置文件中添加插件
new webpack.IgnorePlugin(/./locale/, /moment/)
复制代码
也可以写成
new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/,}),
复制代码
这时候 moment 使用默认语言英语，如果要使用别的语言，可以手动引入需要使用的语言包。
import moment from 'moment'import 'moment/locale/zh-cn'moment.locale('zh-CN')
复制代码
优化 resolve 配置
alias
alias 用的创建 import 或 require 的别名，用来简化模块引用，项目中基本都需要进行配置。
const path = require('path'){ ... resolve:{ // 配置别名 alias: { '~': resolve('src'), '@': resolve('src'), 'components': resolve('src/components'), } }}
复制代码
配置完成之后，我们在项目中就可以
// 使用 src 别名 ~ import '~/fonts/iconfont.css'
// 使用 src 别名 @ import '@/fonts/iconfont.css'
复制代码
除此之外，因为一些第三方库，如 react，我们在安装的时候，实际上已经安装好了它编译好的包，所以我们在这里可以直接指定别名路径
alias: {react: path.resolve( dirname, '../node_modules/react/umd/react.production.min.js' ),}
复制代码
配合上 noParse，在使用的时候，就无须在构建一遍 react
noParse: /react\.production\.min\.js$/,
复制代码
extensions
在 webpack 中，我们可以预先设定一些文件的扩展名
webpack 默认配置
const config = { //... resolve: { extensions: ['.js', '.json', '.wasm'], },};
复制代码
如果在编写的时候不带文件后缀，如
import file from '../path/to/file';
复制代码
webpack 在解析的时候，就可以从我们设置的扩展名中从左往右进行判断
需要注意的是：
高频文件后缀名放前面；
手动配置后，默认配置会被覆盖
参考 webpack 视频讲解：进入学习
如果想保留默认配置，可以用 ... 扩展运算符代表默认配置，例如
const config = { //... resolve: { extensions: ['.ts', '...'], },};
复制代码
modules
告诉 webpack 解析模块时应该搜索的目录，常见配置如下
const path = require('path');
// 路径处理方法function resolve(dir){ return path.join(__dirname, dir);}
const config = { //... resolve: { modules: [resolve('src'), 'node_modules'], },};
复制代码
告诉 webpack 优先 src 目录下查找需要解析的文件，会大大节省查找时间
externals
externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法，因为我们在每次打包的时候，有些依赖的变动很小，所以我们可以不选择不把依赖打包进去，而使用 script 标签的形式来加载他。
比如 react 和 react-dom，我们在页面中引入它
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin="anonymous"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin="anonymous"></script>
复制代码
然后配置 externals
externals: { react: 'React', 'react-dom': 'ReactDOM',},
复制代码
注意 这里配置项的键值是 package.json 文件中依赖库的名称，而 value 值代表的是第三方依赖编译打包后生成的 js 文件，然后 js 文件执行后赋值给 window 的全局变量名称。
我们可以通过下面的方法，来找这个全局变量
上面所说的 js 文件就是要用 CDN 引入的 js 文件。那么可以通过浏览器打开 CDN 链接，选择没有压缩过的那种(不带 min)，比如
https://cdn.bootcdn.net/ajax/libs/react/18.2.0/cjs/react-jsx-dev-runtime.development.js
复制代码
然后在它的源代码里面找，类似与导出赋值这种代码
缓存
webpack5 提供了非常强大的持久化缓存的能力，开箱即用
catch 缓存
webpack5 新加了缓存项配置，具体如下
默认缓存路径在node_modules/.cache/webpack
// 缓存配置 cache: { type: 'filesystem', // 开启持久化缓存 version: createEnvironmentHash(env.raw), // 参考react脚手架的配置 可以记录打包缓存的版本 cacheDirectory: path.appWebpackCache, // 缓存路径 store: 'pack', // 构建依赖，如果有文件修改，则重新执行打包流程 buildDependencies: { defaultWebpack: ['webpack/lib/'], config: [__filename], }, },
复制代码
babel-loader 开启缓存
abel 在转译 js 过程中时间开销比价大，将 babel-loader 的执行结果缓存起来，重新打包的时候，直接读取缓存
缓存位置： node_modules/.cache/babel-loader
配置
//支持转义ES6/ES7/JSX{ test: /\.jsx?$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'], plugins: [ [ require('@babel/plugin-proposal-decorators'), { legacy: true }, ], ], cacheDirectory: true, // 启用缓存 }, }, ], include: path.resolve(__dirname, 'src'), exclude: /node_modules/,},
复制代码
cache-loader
缓存一些性能开销比较大的 loader 的处理结果， 缓存位置：node_modules/.cache/cache-loader
配置 cache-loader
const config = { module: { // ... rules: [ { test: /.(s[ac]|c)ss$/i, //匹配所有的 sass/scss/css 文件 use: [ // 'style-loader', MiniCssExtractPlugin.loader, 'cache-loader', // 获取前面 loader 转换的结果 'css-loader', 'postcss-loader', 'sass-loader', ] }, // ... ] }}
复制代码
dll 动态链接(已弃用)
在 webpack5.x 中已经不建议使用这种方式进行模块缓存，因为其已经内置了更好体验的 cache 方法
hard-source-webpack-plugin
hard-source-webpack-plugin 为模块提供了中间缓存，重复构建时间大约可以减少 80%，但是在 webpack5 中已经内置了模块缓存，不需要再使用此插件
评论