共计 26660 个字符,预计需要花费 67 分钟才能阅读完成。
前言
越来越多的我的项目应用 webpack5 来构建我的项目了,明天给大家带来最前沿的 webpack5 配置,让咱们代码在编译 / 运行时性能更好~
咱们会从以下角度来进行优化:
- 晋升打包构建速度
- 缩小代码体积
- 优化代码运行性能
晋升打包构建速度
在进行打包速度优化之前,须要对以后我的项目每个局部的打包工夫理解分明。
咱们借助 speed-measure-webpack-plugin 插件,它剖析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时,从而让咱们对打包工夫较长的局部进行针对性优化。
通过以下命令装置插件:
yarn add speed-measure-webpack-plugin -D
build 就能看到各个局部的打包耗时
放大构建范畴
构建过程是默认全局查找,这十分的耗时。通过手动配置 rules 中的文件查找范畴,能够缩小打包的范畴,从而晋升打包的速度。
在 webpack.config.js 文件中如下配置:
module.exports = {
// ...
module: {
rules: [
{
test: /.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
],
},
};
因为 babel-loader 对文件的转化是十分耗时的,所以放大构建范畴首先就是放大须要 babel-loader 解决的文件范畴。
能够通过 test、include、exclude 三个配置项来命中 Loader 要利用规定的文件,用 include 去命中须要被 babel-loader 解决的文件,exclude 去排除不须要被解决的文件,从而放大了 Loader 解决文件的范畴。
HotModuleReplacement
开发时咱们批改了其中一个模块代码,Webpack 默认会将所有模块全副从新打包编译,速度很慢。
所以咱们须要做到批改某个模块代码,就只有这个模块代码须要从新打包编译,其余模块不变,这样打包速度就能很快。HotModuleReplacement
(HMR/ 热模块替换):在程序运行中,替换、增加或删除模块,而无需从新加载整个页面。
- 根本配置
module.exports = {
// 其余省略
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否主动关上浏览器
hot: true, // 开启 HMR 性能(只能用于开发环境,生产环境不须要了)},
};
此时 css 款式通过 style-loader 解决,曾经具备 HMR 性能了。然而 js 还不行。
- JS 配置
在 js 模块当中要加上module.hot
的判断才能够
// 判断是否反对 HMR 性能
if (module.hot) {module.hot.accept("./js/aaa.js", function (count) {
//xxx
console.log(111);
});
module.hot.accept("./js/bbb.js", function (sum) {
//xxx
console.log(222);
});
}
但实际上咱们很少看到有这样的写法,为什么呢?这是因为下面开发咱们会应用其余 loader 来解决。
比方:vue-loader, react-hot-loader。他们在解决文件的时候曾经帮咱们做了解决。
这里咱们来简略理解下 HMR 的原理,面试时面试官最喜爱问原理性问题了。
HMR 的工作原理图解
初识 HMR 的时候感觉其很神奇,始终有一些疑难萦绕在脑海。
- webpack 能够将不同的模块打包成 bundle 文件或者几个 chunk 文件,然而当我通过 webpack HMR 进行开发的过程中,我并没有在我的 dist 目录中找到 webpack 打包好的文件,它们去哪呢?
- 通过查看 webpack-dev-server 的 package.json 文件,咱们晓得其依赖于 webpack-dev-middleware 库,那么 webpack-dev-middleware 在 HMR 过程中表演什么角色?
- 应用 HMR 的过程中,通过 Chrome 开发者工具我晓得浏览器是通过 websocket 和 webpack-dev-server 进行通信的,然而 websocket 的 message 中并没有发现新模块代码。打包后的新模块又是通过什么形式发送到浏览器端的呢?为什么新的模块不通过 websocket 随音讯一起发送到浏览器端呢?
- 浏览器拿到最新的模块代码,HMR 又是怎么将老的模块替换成新的模块,在替换的过程中怎么解决模块之间的依赖关系?
- 当模块的热替换过程中,如果替换模块失败,有什么回退机制吗?
带着下面的问题,于是决定深刻到 webpack 源码,寻找 HMR 底层的神秘
HMR 工作流程图解
上图是 webpack 配合 webpack-dev-server 进行利用开发的模块热更新流程图。
- 上图底部红色框内是服务端,而下面的橙色框是浏览器端。
- 绿色的方框是 webpack 代码管制的区域。蓝色方框是 webpack-dev-server 代码管制的区域,洋红色的方框是文件系统,文件批改后的变动就产生在这,而青色的方框是利用自身。
上图显示了咱们批改代码到模块热更新实现的一个周期,通过深绿色的阿拉伯数字符号曾经将 HMR 的整个过程标识了进去。
- 第一步,在 webpack 的 watch 模式下,文件系统中某一个文件产生批改,webpack 监听到文件变动,依据配置文件对模块从新编译打包,并将打包后的代码通过简略的 JavaScript 对象保留在内存中。
- 第二步是 webpack-dev-server 和 webpack 之间的接口交互,而在这一步,次要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互,webpack-dev-middleware 调用 webpack 裸露的 API 对代码变动进行监控,并且通知 webpack,将代码打包到内存中。
- 第三步是 webpack-dev-server 对文件变动的一个监控,这一步不同于第一步,并不是监控代码变动从新打包。当咱们在配置文件中配置了 devServer.watchContentBase 为 true 的时候,Server 会监听这些配置文件夹中动态文件的变动,变动后会告诉浏览器端对利用进行 live reload。留神,这儿是浏览器刷新,和 HMR 是两个概念。
- 第四步也是 webpack-dev-server 代码的工作,该步骤次要是通过
sockjs
((webpack-dev-server 的依赖)在浏览器端和服务端之间建设一个 websocket 长连贯,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包含第三步中 Server 监听动态文件变动的信息。浏览器端依据这些 socket 音讯进行不同的操作。当然服务端传递的最次要信息还是新模块的 hash 值,前面的步骤依据这一 hash 值来进行模块热替换。 - webpack-dev-server/client 端并不可能申请更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是依据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器,也就没有前面那些步骤了。
- HotModuleReplacement.runtime 是客户端 HMR 的中枢,它接管到上一步传递给他的新模块的 hash 值,它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 申请,服务端返回一个 json,该 json 蕴含了所有要更新的模块的 hash 值,获取到更新列表后,该模块再次通过 jsonp 申请,获取到最新的模块代码。这就是上图中 7、8、9 步骤。
- 而第 10 步是决定 HMR 胜利与否的关键步骤,在该步骤中,HotModulePlugin 将会对新旧模块进行比照,决定是否更新模块,在决定更新模块后,查看模块之间的依赖关系,更新模块的同时更新模块间的依赖援用。
- 最初一步,当 HMR 失败后,回退到 live reload 操作,也就是进行浏览器刷新来获取最新打包代码。
webpack 视频解说:进入学习
OneOf
打包时每个文件都会通过所有 loader 解决,尽管因为 test
正则起因理论没有解决上,然而都要过一遍。比较慢。实际上就是匹配上一个 loader, 剩下的就不匹配了。
代码如下
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: undefined, // 开发模式没有输入,不须要指定输入目录
filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
// clean: true, // 开发模式没有输入,不须要清空输入后果
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: ["style-loader", "css-loader"],
},
{test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除 node_modules 代码不编译
loader: "babel-loader",
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定查看文件的根目录
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创立文件
// 新的 html 文件有两个特点:1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
// 开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否主动关上浏览器
hot: true, // 开启 HMR 性能
},
};
Cache
每次打包时 js 文件都要通过 Eslint 查看 和 Babel 编译,速度比较慢。
咱们能够缓存之前的 Eslint 查看 和 Babel 编译后果,这样第二次打包时速度就会更快了。对 Eslint 查看 和 Babel 编译后果进行缓存。
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: undefined, // 开发模式没有输入,不须要指定输入目录
filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
// clean: true, // 开发模式没有输入,不须要清空输入后果
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},{
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"
),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创立文件
// 新的 html 文件有两个特点:1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
// 开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否主动关上浏览器
hot: true, // 开启 HMR 性能
},
};
长久化缓存
咱们还能够通过通过配置 webpack 长久化缓存 cache: filesystem
,来缓存生成的 webpack 模块和 chunk,改善构建速度。
简略来说,通过 cache: filesystem 能够将构建过程的 webpack 模板进行缓存,大幅晋升二次构建速度、打包速度,当构建忽然中断,二次进行构建时,能够间接从缓存中拉取,可提速 90% 左右。
配置形式如下:
module.exports = {
cache: {type: "filesystem", // 应用文件缓存},
};
Network Cache
未来开发时咱们对动态资源会应用缓存来优化,这样浏览器第二次申请资源就能读取缓存了,速度很快。
然而这样的话就会有一个问题, 因为前后输入的文件名是一样的,都叫 main.js,一旦未来公布新版本,因为文件名没有变动导致浏览器会间接读取缓存,不会加载新资源,我的项目也就没法更新了。
所以咱们从文件名动手,确保更新前后文件名不一样,这样就能够做缓存了。
它们都会生成一个惟一的 hash 值。
- fullhash(webpack4 是 hash)
每次批改任何一个文件,所有文件名的 hash 至都将扭转。所以一旦批改了任何一个文件,整个我的项目的文件缓存都将生效。
- chunkhash
依据不同的入口文件 (Entry) 进行依赖文件解析、构建对应的 chunk,生成对应的哈希值。咱们 js 和 css 是同一个引入,会共享一个 hash 值。
- contenthash
依据文件内容生成 hash 值,只有文件内容变动了,hash 值才会变动。所有文件 hash 值是独享且不同的。
// cpu 核数
const threads = os.cpus().length;
// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
entry: "./src/main.js",
output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
// [contenthash:8]应用 contenthash,取 8 位长度
filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输入资源命名形式
chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动静导入输入资源命名形式
assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名形式(留神用 hash)clean: true,
},
plugins: [ ],
// 代码宰割配置
splitChunks: {
chunks: "all", // 对所有模块都进行宰割
// 其余内容用默认配置即可
},
},
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否主动关上浏览器
// },
mode: "production",
devtool: "source-map",
};
Thead
当我的项目越来越宏大时,打包速度越来越慢,甚至于须要一个下午能力打包进去代码。这个速度是比较慢的。
咱们想要持续晋升打包速度,其实就是要晋升 js 的打包速度,因为其余文件都比拟少。
而对 js 文件解决次要就是 eslint、babel、Terser 三个工具,所以咱们要晋升它们的运行速度。
咱们能够开启多过程同时解决 js 文件,这样速度就比之前的单过程打包更快了。
作用:
多过程打包
, 开启电脑的多个过程同时干一件事,速度更快。 须要留神:请仅在特地耗时的操作中应用,因为每个过程启动就有大概为 600ms 左右开销。
咱们启动过程的数量就是咱们 CPU 的核数。
1. 如何获取 CPU 的核数,因为每个电脑都不一样。// nodejs 外围模块,间接应用
const os = require("os");
// cpu 核数
const threads = os.cpus().length;
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// cpu 核数
const threads = os.cpus().length;
// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
entry: "./src/main.js",
output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
clean: true,
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: getStyleLoaders(),},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoaders("stylus-loader"),
},
{test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
// exclude: /node_modules/, // 排除 node_modules 代码不编译
include: path.resolve(__dirname, "../src"), // 也能够用蕴含
use: [
{
loader: "thread-loader", // 开启多过程
options: {workers: threads, // 数量},
},
{
loader: "babel-loader",
options: {cacheDirectory: true, // 开启 babel 编译缓存},
},
],
},
],
},
],
},
plugins:[//xxx],
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否主动关上浏览器
// },
mode: "production",
devtool: "source-map",
};
Tree Shaking
开发时咱们定义了一些工具函数库,或者援用第三方工具函数库或组件库。
如果没有非凡解决的话咱们打包时会引入整个库,然而实际上可能咱们可能只用上极小局部的性能。
这样将整个库都打包进来,体积就太大了。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
- 配置
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// cpu 核数
const threads = os.cpus().length;
// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
entry: "./src/main.js",
output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
clean: true,
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: getStyleLoaders(),},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoaders("stylus-loader"),
},
{
test: /\.js$/,
// exclude: /node_modules/, // 排除 node_modules 代码不编译
include: path.resolve(__dirname, "../src"), // 也能够用蕴含
use: [
{
loader: "thread-loader", // 开启多过程
options: {workers: threads, // 数量},
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ["@babel/plugin-transform-runtime"], // 缩小代码体积
},
},
],
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定查看文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
threads, // 开启多过程
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创立文件
// 新的 html 文件有两个特点:1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取 css 成独自文件
new MiniCssExtractPlugin({
// 定义输入文件名和目录
filename: "static/css/main.css",
}),
// css 压缩
// new CssMinimizerPlugin(),],
optimization: {
minimizer: [
// css 压缩也能够写到 optimization.minimizer 外面,成果一样的
new CssMinimizerPlugin(),
// 当生产模式会默认开启 TerserPlugin,然而咱们须要进行其余配置,就要从新写了
new TerserPlugin({parallel: threads, // 开启多过程}),
]
],
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否主动关上浏览器
// },
mode: "production",
devtool: "source-map",
};
优化代码运行性能
多入口
- 文件目录
├── public
├── src
| ├── app.js
| └── main.js
├── package.json
└── webpack.config.js
- 下载包
npm i webpack webpack-cli html-webpack-plugin -D
- 新建文件
内容无关紧要,次要察看打包输入的后果
- app.js
console.log("hello app");
- main.js
console.log("hello main");
- 配置
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
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,
},
plugins: [
new HtmlWebpackPlugin({template: "./public/index.html",}),
],
mode: "production",
};
- 运行指令
npx webpack
此时在 dist 目录咱们能看到输入了两个 js 文件。
总结:配置了几个入口,至多输入几个 js 文件。
提取反复代码
如果多入口文件中都援用了同一份代码,咱们不心愿这份代码被打包到两个文件中,导致代码反复,体积更大。
咱们须要提取多入口的反复代码,只打包生成一个 js 文件,其余文件援用它就好。
- 批改文件
- app.js
import {sum} from "./math";
console.log("hello app");
console.log(sum(1, 2, 3, 4));
- main.js
import {sum} from "./math";
console.log("hello main");
console.log(sum(1, 2, 3, 4, 5));
- math.js
export const sum = (...args) => {return args.reduce((p, c) => p + c, 0);
};
- 批改配置文件
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
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",
clean: true,
},
plugins: [
new HtmlWebpackPlugin({template: "./public/index.html",}),
],
mode: "production",
optimization: {
// 代码宰割配置
splitChunks: {
chunks: "all", // 对所有模块都进行分
// 批改配置
cacheGroups: {
// 组,哪些模块要打包到一个组
// defaultVendors: { // 组名
// test: /[\\/]node_modules[\\/]/, // 须要打包到一起的模块
// priority: -10, // 权重(越大越高)// reuseExistingChunk: true, // 如果以后 chunk 蕴含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
// },
default: {
// 其余没有写的配置会应用下面的默认值
minSize: 0, // 咱们定义的文件体积太小了,所以要改打包的最小文件体积
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};
- 运行指令
npx webpack
此时咱们会发现生成 3 个 js 文件,其中有一个就是提取的公共模块。
按需加载,动静导入
想要实现按需加载,动静导入模块。还须要额定配置:
- 批改文件
- main.js
console.log("hello main");
document.getElementById("btn").onclick = function () {
// 动静导入 --> 实现按需加载
// 即便只被援用了一次,也会代码宰割
import("./math.js").then(({sum}) => {alert(sum(1, 2, 3, 4, 5));
});
};
- app.js
console.log("hello app");
- public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code Split</title>
</head>
<body>
<h1>hello webpack</h1>
<button id="btn"> 计算 </button>
</body>
</html>
- 运行指令
npx webpack
咱们能够发现,一旦通过 import 动静导入语法导入模块,模块就被代码宰割,同时也能按需加载了。
给动静导入文件取名称
- 批改文件
- main.js
import sum from "./js/sum";
// 引入资源,Webpack 才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 以下代码生产模式下会删除
if (module.hot) {module.hot.accept("./js/sum.js", function (sum) {const result2 = sum(1, 2, 3, 4);
console.log(result2);
});
}
document.getElementById("btn").onClick = function () {
// eslint 会对动静导入语法报错,须要批改 eslint 配置文件
// webpackChunkName: "math":这是 webpack 动静导入模块命名的形式
// "math" 未来就会作为 [name] 的值显示。import(/* webpackChunkName: "math" */ "./js/math.js").then(({count}) => {console.log(count(2, 1));
});
};
eslint 配置
npm i eslint-plugin-import -D
// .eslintrc.js
module.exports = {
// 继承 Eslint 规定
extends: ["eslint:recommended"],
env: {
node: true, // 启用 node 中全局变量
browser: true, // 启用浏览器中全局变量
},
plugins: ["import"], // 解决动静导入 import 语法报错问题 --> 理论应用 eslint-plugin-import 的规定解决的
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {"no-var": 2, // 不能应用 var 定义变量},
};
对立命名配置
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// cpu 核数
const threads = os.cpus().length;
// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
entry: "./src/main.js",
output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
filename: "static/js/[name].js", // 入口文件打包输入资源命名形式
chunkFilename: "static/js/[name].chunk.js", // 动静导入输入资源命名形式
assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名形式(留神用 hash)clean: true,
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: getStyleLoaders(),},
{
test: /.less$/,
use: getStyleLoaders("less-loader"),
},
{test: /.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
test: /.styl$/,
use: getStyleLoaders("stylus-loader"),
},
{test: /.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {maxSize: 10 * 1024, // 小于 10kb 的图片会被 base64 解决},
},
// generator: {
// // 将图片文件输入到 static/imgs 目录中
// // 将图片文件命名 [hash:8][ext][query]
// // [hash:8]: hash 值取 8 位
// // [ext]: 应用之前的文件扩展名
// // [query]: 增加之前的 query 参数
// filename: "static/imgs/[hash:8][ext][query]",
// },
},
{test: /.(ttf|woff2?)$/,
type: "asset/resource",
// generator: {// filename: "static/media/[hash:8][ext][query]",
// },
},
{
test: /.js$/,
// exclude: /node_modules/, // 排除 node_modules 代码不编译
include: path.resolve(__dirname, "../src"), // 也能够用蕴含
use: [
{
loader: "thread-loader", // 开启多过程
options: {workers: threads, // 数量},
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ["@babel/plugin-transform-runtime"], // 缩小代码体积
},
},
],
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定查看文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
threads, // 开启多过程
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创立文件
// 新的 html 文件有两个特点:1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取 css 成独自文件
new MiniCssExtractPlugin({
// 定义输入文件名和目录
filename: "static/css/[name].css",
chunkFilename: "static/css/[name].chunk.css",
}),
// css 压缩
// new CssMinimizerPlugin(),],
optimization: {
minimizer: [
// css 压缩也能够写到 optimization.minimizer 外面,成果一样的
new CssMinimizerPlugin(),
// 当生产模式会默认开启 TerserPlugin,然而咱们须要进行其余配置,就要从新写了
new TerserPlugin({parallel: threads, // 开启多过程}),
// 压缩图片
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",},
},
],
},
],
],
},
},
}),
],
// 代码宰割配置
splitChunks: {
chunks: "all", // 对所有模块都进行宰割
// 其余内容用默认配置即可
},
},
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否主动关上浏览器
// },
mode: "production",
devtool: "source-map",
};
运行指令
npx webpack
察看打包输入 js 文件名称。
Preload / Prefetch
咱们后面曾经做了代码宰割,同时会应用 import 动静导入语法来进行代码按需加载(咱们也叫懒加载,比方路由懒加载就是这样实现的)。
然而加载速度还不够好,比方:是用户点击按钮时才加载这个资源的,如果资源体积很大,那么用户会感觉到显著卡顿成果。
咱们想在浏览器闲暇工夫,加载后续须要应用的资源。咱们就须要用上 Preload
或 Prefetch
技术。
Preload
:通知浏览器立刻加载资源。Prefetch
:通知浏览器在闲暇时才开始加载资源。
它们共同点:- 都只会加载资源,并不执行。
- 都有缓存。
它们区别: Preload
加载优先级高,Prefetch
加载优先级低。Preload
只能加载以后页面须要应用的资源,Prefetch
能够加载以后页面资源,也能够加载下一个页面须要应用的资源。
总结:
- 以后页面优先级高的资源用
Preload
加载。 - 下一个页面须要应用的资源用
Prefetch
加载。
它们的问题:兼容性较差。
- 咱们能够去 Can I Use 网站查问 API 的兼容性问题。
Preload
绝对于Prefetch
兼容性好一点
npm i @vue/preload-webpack-plugin -D
配置如下
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
// cpu 核数
const threads = os.cpus().length;
// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
entry: "./src/main.js",
output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
filename: "static/js/[name].js", // 入口文件打包输入资源命名形式
chunkFilename: "static/js/[name].chunk.js", // 动静导入输入资源命名形式
assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名形式(留神用 hash)clean: true,
},
module: {
rules: [
{
oneOf: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组外面 Loader 执行程序是从右到左
use: getStyleLoaders(),},
{
test: /.less$/,
use: getStyleLoaders("less-loader"),
},
{test: /.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
test: /.styl$/,
use: getStyleLoaders("stylus-loader"),
},
{test: /.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {maxSize: 10 * 1024, // 小于 10kb 的图片会被 base64 解决},
},
// generator: {
// // 将图片文件输入到 static/imgs 目录中
// // 将图片文件命名 [hash:8][ext][query]
// // [hash:8]: hash 值取 8 位
// // [ext]: 应用之前的文件扩展名
// // [query]: 增加之前的 query 参数
// filename: "static/imgs/[hash:8][ext][query]",
// },
},
{test: /.(ttf|woff2?)$/,
type: "asset/resource",
// generator: {// filename: "static/media/[hash:8][ext][query]",
// },
},
{
test: /.js$/,
// exclude: /node_modules/, // 排除 node_modules 代码不编译
include: path.resolve(__dirname, "../src"), // 也能够用蕴含
use: [
{
loader: "thread-loader", // 开启多过程
options: {workers: threads, // 数量},
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ["@babel/plugin-transform-runtime"], // 缩小代码体积
},
},
],
},
],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定查看文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
threads, // 开启多过程
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创立文件
// 新的 html 文件有两个特点:1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取 css 成独自文件
new MiniCssExtractPlugin({
// 定义输入文件名和目录
filename: "static/css/[name].css",
chunkFilename: "static/css/[name].chunk.css",
}),
// css 压缩
// new CssMinimizerPlugin(),
new PreloadWebpackPlugin({
rel: "preload", // preload 兼容性更好
as: "script",
// rel: 'prefetch' // prefetch 兼容性更差
}),
],
optimization: {
minimizer: [
// css 压缩也能够写到 optimization.minimizer 外面,成果一样的
new CssMinimizerPlugin(),
// 当生产模式会默认开启 TerserPlugin,然而咱们须要进行其余配置,就要从新写了
new TerserPlugin({parallel: threads, // 开启多过程}),
// 压缩图片
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",},
},
],
},
],
],
},
},
}),
],
// 代码宰割配置
splitChunks: {
chunks: "all", // 对所有模块都进行宰割
// 其余内容用默认配置即可
},
},
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否主动关上浏览器
// },
mode: "production",
devtool: "source-map",
};
Core-js
过来咱们应用 babel 对 js 代码进行了兼容性解决,其中应用 @babel/preset-env 智能预设来解决兼容性问题。
它能将 ES6 的一些语法进行编译转换,比方箭头函数、点点点运算符等。然而如果是 async 函数、promise 对象、数组的一些办法(includes)等,它没方法解决。
所以此时咱们 js 代码依然存在兼容性问题,一旦遇到低版本浏览器会间接报错。所以咱们想要将 js 兼容性问题彻底解决,core-js
是专门用来做 ES6 以及以上 API 的 polyfill
。
polyfill
翻译过去叫做垫片 / 补丁。就是用社区上提供的一段代码,让咱们在不兼容某些新个性的浏览器上,应用该新个性。
npm i core-js
手动全副援用:
import "core-js";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});
下面时手动全副援用的状况,这样引入会将所有兼容性代码全副引入,体积太大了。咱们只想引入 promise 的 polyfill
。
手动按需引入
import "core-js/es/promise";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});
只引入打包 promise 的 polyfill
,打包体积更小。然而未来如果还想应用其余语法,我须要手动引入库很麻烦。
主动按需引入
import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});
//babel.config.js
module.exports = {
// 智能预设:可能编译 ES6 语法
presets: [
[
"@babel/preset-env",
// 按需加载 core-js 的 polyfill
{useBuiltIns: "usage", corejs: { version: "3", proposals: true} },
],
],
};
externals
externals 能够通知 webpack 不打包资源,从而缩小入口文件的大小,如果不打包某个包,又要用到他,这个时候须要从 html 的 script 标签进行引入,个别引入的是包的 cdn 资源, 配置 externals 的办法有多种:具体查看 webpack 官网 externals。
例如,从 CDN 引入 jQuery,而不是把它打包:
index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous"
></script>
这样就剥离了那些不须要改变的依赖模块,换句话,上面展现的代码还能够失常运行:
import $ from 'jquery';
$('.my-element').animate(/* ... */);
webpack.config.js
module.exports = {
//...
externals: {jquery: 'jQuery',},
};
其实 webpack 自带了插入 cdn 的办法,而且有很多种,具体本人查看官网,这里将一种最罕用的。
增加 externalsType: ‘script’ , 批改 externals 配置,将 jquery 的值改为数组
Shimming 预置依赖,ProvidePlugin
webpack compiler 可能辨认遵循 ES2015 模块语法、CommonJS 或 AMD 标准编写的模块。然而,一些 third party(第三方库) 可能会援用一些全局依赖(例如 jQuery 中的 $)。因而这些 library 也可能会创立一些须要导出的全局变量。这些“broken modules(不符合规范的模块)”就是 shimming(预置依赖) 发挥作用的中央。index.js:
import $ from 'jquery'
import _ from 'lodash'
import {ui} from './ui'
ui()
const dom = $('<div>')
dom.html(_.join(['Niall','August'],'-'))
$('body').append(dom)
ui.js:
export function ui(){ $('body').css('background',_.join(['green'],'')) }
ui.js的作用就是将 body
的背景色彩设置为 green
,然而在ui.js 中须要用到 jquery 的 $
和 lodash 的 _
,这种状况下,尽管webpack 能够打包 index.js,然而这个ui.js 却并不能施展它的作用,控制台会报以下谬误:
解决办法: 为 webpack 提供预置依赖
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [new webpack.HotModuleReplacementPlugin(),
// new BundleAnalyzerPlugin(),
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery'
})
],
这里 _: 'lodash'
让ProvidePlugin在打包一个文件时,如果发现了该文件中应用到了 _
,那么就会向其中注入var _ = require('lodash')'
。
其实还有一种写法:
如果咱们想在我的项目中随处应用_.join()
,那么咱们能够这样写:
new webpack.ProvidePlugin({_join: ['lodash','join'], $: 'jquery' })
这里的 join: ['lodash','join']
会让 ProvidePlugin 向应用了 join
的文件中注入:
var _join = require('lodash').join
ui.js:
export function ui(){ $('body').css('background',_join(['green'],'')) }
这样就能达到咱们想要的成果了。
好了,到这咱们的高级配置就到这里了,除了下面这些还有其余优化伎俩,到这就不一一列举了,感兴趣的能够本人到官网上查阅,上面咱们来总结一下咱们从 4 个角度对 webpack 和代码进行了优化:
- 晋升 webpack 晋升打包构建速度
- 应用
peed-measure-webpack-plugin
剖析打包耗时,进行针对性优化。 - 应用
HotModuleReplacement
让开发时只从新编译打包更新变动了的代码,不变的代码应用缓存,从而使更新速度更快。 - 应用
OneOf
让资源文件一旦被某个 loader 解决了,就不会持续遍历了,打包速度更快。 - 应用
Cache
对 eslint 和 babel 解决的后果进行缓存,让第二次打包速度更快。 - 应用
Thead
多过程解决 eslint 和 babel 工作,速度更快。(须要留神的是,过程启动通信都有开销的,要在比拟多代码解决时应用才有成果) - 缩小代码体积
- 应用
Tree Shaking
剔除了没有应用的多余代码,让代码体积更小。 - 应用
@babel/plugin-transform-runtime
插件对 babel 进行解决,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。 - 应用
externals
对须要宰割的代码进行 cdn 资源援用,缩小代码的体积,但同时会减少带宽。 - 优化代码运行性能
- 应用
Code Split
对代码进行宰割成多个 js 文件,从而使单个文件体积更小,并行加载 js 速度更快。并通过 import 动静导入语法进行按需加载,从而达到须要应用时才加载该资源,不必时不加载资源。 - 应用
Preload / Prefetch
对代码进行提前加载,等将来须要应用时就能间接应用,从而用户体验更好。 - 应用
Core-js
对 js 进行兼容性解决,让咱们代码能运行在低版本浏览器。 - 应用
ProvidePlugin
对需援用代码## Shimming
预置依赖