介绍
所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化：
- 提升开发体验
- 提升打包构建速度
- 减少代码体积
- 优化代码运行性能
SourceMap （提升开发体验）
- 经过 webpack 编译后的代码比较混乱 一旦出现问题 比较难定为所以我们需要更加准确的错误提示，来帮助我们更好的开发代码
- SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源
- 开发模式：
cheap-module-source-map- 优点：打包编译速度快，只包含行映射
- 缺点：没有列映射
module.exports = {
// 其他省略
mode: "development",
devtool: "cheap-module-source-map",
};
- 生产模式：
source-map- 优点：包含行/列映射
- 缺点：打包编译速度更慢
module.exports = {
// 其他省略
mode: "production",
devtool: "source-map",
};
HotModuleReplacement 模块热替换（提升打包构建速度）
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面
- 配置
module.exports = {
// 其他省略
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
},
};
此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。 对于每一个模块做判断
// 判断是否支持HMR功能
if (module.hot) {
module.hot.accept("./js/count.js", function (count) {
const result1 = count(2, 1);
console.log(result1);
});
module.hot.accept("./js/sum.js", function (sum) {
const result2 = sum(1, 2, 3, 4);
console.log(result2);
});
}
上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。 比如：vue-loader, react-hot-loader
OneOf
打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。
使用 oneof 顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了
module.exports = {
entry: "./src/main.js",
output: {},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
..... 省略其他规则
],
},
],
},
plugins: [],
// 开发服务器
devServer: {},
mode: "development",
devtool: "cheap-module-source-map",
};
Include/Exclude
- include 包含，只处理 xxx 文件
- exclude 排除，除了 xxx 文件以外其他文件都处理
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {},
module: {
rules: [
{
oneOf: [
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, "../src"), // 也可以用包含
loader: "babel-loader",
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
}),
],
// 开发服务器
devServer: {},
mode: "development",
devtool: "cheap-module-source-map",
};
注意 include exclude 只能写一个 并且只对js 文件 其它的没必要 不合理
生产模式也是如此配置。
## Cache
每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。
我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。
Cache 对 Eslint 检查 和 Babel 编译结果进行缓存
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {},
module: {
rules: [
{
oneOf: [
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, "../src"), // 也可以用包含
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩 缓存只是临时的 压缩需要时间 所以缓存不要压缩
},
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
}),
],
// 开发服务器
devServer: {},
mode: "development",
devtool: "cheap-module-source-map",
};
Thead 多进程处理 主要用于 eslint预发检查 babel 编译 js 压缩
开启电脑的多个进程同时干一件事，速度更快。
需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。
- 获取cpu 核数
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
- 下载包
npm i thread-loader -D
- // babel-loader 使用 多进程
const os = require("os");
// cpu核数
const threads = os.cpus().length;
{
test: /.js$/,
use: [
{
loader: "thread-loader", // babel-loader 开启多进程 放在 babel-loader 前
options: {
workers: threads, // 数量
},
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启babel编译缓存
},
},
],
},
- eslint 开启多进程
plugins: [
new ESLintWebpackPlugin({
... 其它配置省略
threads, // 开启多进程
}),
- 压缩js 开启多进程 生产模式 默认压缩的 但是我们要开启多进程 多以要写配置
// 不需要下载 本身就有
const TerserPlugin = require("terser-webpack-plugin");
...
optimization: {
minimize: true,
minimizer: [
// css压缩也可以写到optimization.minimizer里面，效果一样的
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
],
},
// devServer: {},
Tree Shaking 减少代码体积
通常用于描述移除 JavaScript 中的没有使用上的代码。
注意：它依赖 ES Module
Webpack 已经默认开启了这个功能，无需其他配置。
babel 引起的体积过大处理
Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！
Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。
你可以将这些辅助代码作为一个独立模块，来避免重复引入。
@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，
而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
- 下载包
npm i @babel/plugin-transform-runtime -D
- 配置
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
},
Image Minimizer 图片压缩
开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。
我们可以对图片进行压缩，减少图片体积。
注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。
image-minimizer-webpack-plugin: 用来压缩图片的插件
- 下载包
npm i image-minimizer-webpack-plugin imagemin -D
- 其他包
- 无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
- 有损压缩
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
- 配置 无损为例
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
optimization: {
minimizer: [
// 压缩图片
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
],
},
4：注意的是 可能会报错 我们需要安装两个文件到 node_modules 中才能解决
Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT
- jpegtran.exe
需要复制到 node_modules\jpegtran-bin\vendor 下面
- optipng.exe
需要复制到 node_modules\optipng-bin\vendor 下面
Code Split
打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。
所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。
代码分割（Code Split）主要做了两件事：
- 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
- 按需加载：需要哪个文件就加载哪个文件。
- 多入口文件
- 多个入口打包肯定打包出多个js文件
module.exports = {
// 单入口
// entry: './src/main.js',
// 多入口
entry: {
main: "./src/main.js",
app: "./src/app.js",
},
output: {
path: path.resolve(__dirname, "./dist"),
// [name]是webpack命名规则，使用chunk的name作为输出的文件名。
// 什么是chunk？打包的资源就是chunk，输出出去叫bundle。
// chunk的name是啥呢？ 比如： entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx，和文件名无关。
// 为什么需要这样命名呢？如果还是之前写法main.js，那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
filename: "js/[name].js",
clear: true,
},
2.提取重复代码
如果多入口文件中都引用了同一份代码，我们不希望这份代码被打包到两个文件中，导致代码重复，体积更大。
我们需要提取多入口的重复代码，只打包生成一个 js 文件，其他文件引用它就好。
optimization: {
// 代码分割配置
splitChunks: {
chunks: "all", // 对所有模块都进行分割
// 以下是默认值
// minSize: 20000, // 分割代码最小的大小
// minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
// minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
// maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
// maxInitialRequests: 30, // 入口js文件最大并行请求数量
// enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略 minRemainingSize、maxAsyncRequests、maxInitialRequests）
// cacheGroups: { // 组，哪些模块要打包到一个组
// defaultVendors: { // 组名
// test: /[\/]node_modules[\/]/, // 需要打包到一起的模块
// priority: -10, // 权重（越大越高）
// reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
// },
// default: { // 其他没有写的配置会使用上面的默认值
// minChunks: 2, // 这里的minChunks权重更大
// priority: -20,
// reuseExistingChunk: true,
// },
// },
// 修改配置
cacheGroups: {
// 组，哪些模块要打包到一个组
// defaultVendors: { // 组名
// test: /[\/]node_modules[\/]/, // 需要打包到一起的模块
// priority: -10, // 权重（越大越高）
// reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
// },
default: {
// 其他没有写的配置会使用上面的默认值
minSize: 0, // 我们定义的文件体积太小了，所以要改打包的最小文件体积
minChunks: 2, // 这里2是指 2个入口文件
priority: -20,
reuseExistingChunk: true,
},
},
},
- 按需加载，动态导入
- eslint
// 解决动态导入import语法报错问题 npm i eslint-plugin-import -D - 配置
// .eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
};
// js代码
document.getElementById("btn").onclick = function () {
// 动态导入 --> 实现按需加载
// 即使只被引用了一次，也会代码分割
// eslint会对动态导入语法报错，需要修改eslint配置文件 如上
// webpackChunkName: "math"：这是webpack动态导入模块命名的方式
// 同时要在 output 配置加上
// output: {
// path: path.resolve(__dirname, "../dist"),
// filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
// chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
},
// "math"将来就会作为[name]的值显示。
import(/* webpackChunkName: "math" */ "./js/math.js") .then(({ sum }) => {
alert(sum(1, 2, 3, 4, 5));
});
};
统一命名规则
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
// chunkFilename 给打包输出的其他文件命名
chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式 加 .chunk
// 图片、字体等资源命名方式（注意用hash） type: assets 类型的命名
assetModuleFilename: "static/media/[name].[hash][ext]",
clean: true,
},
。。。
plugins : [
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/[name].css", 主入口的css
// // chunkFilename 给打包输出的其他 css文件命名 加 .chunk
chunkFilename: "static/css/[name].chunk.css",
}),
]
网络缓存
将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，速度很快。 所以每次更新文件名都要变化 不然一直读原来的缓存就不合适了
所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了
-
fullhash（webpack4 是 hash） 每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。
-
chunkhash 记住 是入口文件 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们 js 和 css 是同一个引入，会共享一个 hash 值。
-
contenthash 根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的 所以 contenthash 最佳
-
问题 由于互相引用 contenthash变了 引用的代码也变了引用的contenthash也变了 一个文件变了 向上的引用链条 contenthash 都变 不合适
-
解决办法 将 hash 值单独保管在一个 runtime 文件中。
runtime 文件只保存文件的 hash 值和它们与文件关系，整个文件体积就比较小，所以变化重新请求的代价也小 也就是 引用在这里找映射关系 所以 文件变了 只会牵动 runtime 这个map文件变 不牵涉引用文件变
- 写法
optimization: {
minimizer: [
。。。
],
// 代码分割配置
splitChunks: {
chunks: "all", // 对所有模块都进行分割
// 其他内容用默认配置即可
},
// 提取runtime文件
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
},
},
Core-js
core-js 是专门用来做 ES6 以及以上 API 的 polyfill。
polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性
比如 代码里 使用了 promise 此时 eslint会报错 解决
- 先下载
npm i @babel/eslint-parser -D
- .eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
parser: "@babel/eslint-parser", // 支持最新的最终 ECMAScript 标准
};
打包后不报错 但是Promise并没有编译成 浏览器低版本支持的代码 原封不动的打包到输出文件里
所以我们需要使用 core-js 来进行 polyfill
- 下载包
npm i core-js
- 手动全部引入
// main.js 主入口文件
import "core-js";
这样引入会将所有兼容性代码全部引入，体积太大了。我们只想引入 promise 的 polyfill
- 手动按需引入
// main.js 主入口文件
import "core-js/es/promise";
高级语法太多 记不住
- 最佳实践 自动的按需引入
- babel.config.js
module.exports = {
// 智能预设：能够编译ES6语法
presets: [
[
"@babel/preset-env",
// 按需加载core-js的polyfill
{ useBuiltIns: "usage", corejs: { version: "3", proposals: true } },
],
],
};
PWA
渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。
其中最重要的是，在 离线(offline) 时应用程序能够继续运行功能。
内部通过 Service Workers 技术实现的。
- 下载
npm i workbox-webpack-plugin -D
- 配置
// webpack.config.js
const WorkboxPlugin = require("workbox-webpack-plugin");
module.exports = {
plugins: [
new WorkboxPlugin.GenerateSW({
// 这些选项帮助快速启用 ServiceWorkers
// 不允许遗留任何“旧的” ServiceWorkers
clientsClaim: true,
skipWaiting: true,
}),
]
}
- 代码 // 不是所有浏览器都支持 所以 在主入口文件
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("/service-worker.js")
.then((registration) => {
console.log("SW registered: ", registration);
})
.catch((registrationError) => {
console.log("SW registration failed: ", registrationError);
});
});
}
打包后 使用为服务器 serve 查看打包后页面 比如 文件都打包在 dist
serve dist
打开页面 断开网络 刷新 发现仍然能打开页面
