SourceMap
SourceMap 是一个用来生成源代码与构建后代码一一映射的文件的方案。
通俗的来说, Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系
我们线上的代码一般都是经过打包的,如果线上代码报错了,想要调试起来,那真是很费劲了,比如下面这个例子:
使用打包工具 Webpack ,编译这一段代码
开发模式
cheap-module-source-map
module.exports = {
// 其他省略
mode: "development",
devtool: "cheap-module-source-map",
};
- 优点:打包编译速度快,只包含行映射
- 缺点:没有列映射
生产模式
source-map
module.exports = {
// 其他省略
mode: "production",
devtool: "source-map",
};
- 优点:包含行/列映射
- 缺点:打包编译速度更慢
参考:https://blog.csdn.net/u010358168/article/details/124902877
提升打包构建速度
在开发时,我们修改其中一个模块代码,Webpack 默认会将所有模块重新打包编译,速度很慢。
我们需要做到修改某个模块代码,就只有这个模块代码重新打包编译,其他模块不变,这样速度就会有很大的提升。
HotModuleReplacement(HMR/热模块替换)
:在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。
使用
在config/webpack.dev.js文件中配置
//开发服务器
devServer: {
host: '127.0.0.1', // 域名
port: '3000', // 端口
open: true, // 是否自动打开浏览器
hot: true,// 开启HMR功能(只能用于开发环境,生产环境不需要)
},
此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了, 但是 js 还是不支持的。
在 main.js 中开启 HMR:
// 判断是否支持HMR功能
if (module.hot) {
module.hot.accept('./js/sub.js')
module.hot.accept('./js/sum.js', function (sum) {
console.log('module.hot sum called');
})
}
上面这样写会很麻烦,有多少个js就要配置多少个,所以实际开发我们会使用其他loader来解决。
比如:vue-loader 和 react-hot-loader。
OneOf
打包时每个文件都会经过所有 loader 处理,虽然 test 正则原因实际没有处理上,但是都要过一遍,是比较慢的。OneOf 的作用是只匹配一个loader, 剩下的就不匹配了。
修改 config/webpack.dev.js 和 webpack.prod.js,如下:
// 加载器
module: {
rules: [
{
oneOf: [
{
// 匹配css结尾文件
test: /\.css$/,
// loader执行顺序是从右到左
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
// 小于10kb的图片转base64
// 优点:减少请求数量 缺点:体积会增大三分之一
dataUrlCondition: {
maxSize: 20 * 1024 // 20kb
}
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
}
},
{
/**
* 处理图标字体、媒体等资源
* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
*/
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
]
}
]
},
Include/Exclude
开发时我们需要使用第三方的库或插件,所有文件都下载到node_modules 中了,而这些文件是不需要编译可以直接使用的。
所以我们在对 js 文件处理时,要排除 node_modules 下面的文件。
- include:包含,只处理 xxx 文件
- exclude:排除,除了 xxx 文件以外其他文件都处理
使用
修改 config/webpack.dev.js 和 config/webpack.prod.js,如下:
... { test: /\.js$/, // exclude: /node_modules/, // 排除node_modules代码不编译 include: path.resolve(__dirname, '../src'), loader: "babel-loader", }, ... new ESLintWebpackPlugin({ // 指定检查文件的根目录 context: path.resolve(__dirname, '../src'), exclude: 'node_modules'// 默认值 }),
Cache
每次打包时 js 文件都要经过 Eslint 检查和 Babel 编译,速度比较慢。
我们可以缓存之前的 Eslint 检查和 Babel 编译结果,这样第二次打包时速度就会更快了。
修改 config/webpack.dev.js 和 config/webpack.prod.js,如下:
...
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
loader: "babel-loader",
options: {
cacheDirectory: true,// 开启babel编译缓存
cacheCompression: false // 缓存文件不要压缩
}
},
...
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',// 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache') // 缓存目录
}),
Thread
当项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码,这个速度是比较慢的。
我们想要继续提升打包速度,其实就是要提升 js 的打包速度,因为其他文件都比较少。
而对 js 文件处理主要就是 eslint、babel、Terser 三个工具,所以我们要提升它们的运行速度。
我们可以开启多进程同时处理 js 文件,这样速度就比之前的单进程打包更快了。
多进程打包
多进程打包:开启电脑的多个进程同时干一件事,速度更快。
请仅在特别耗时的操作中使用,因为每个进程启动就有大约为 600ms 左右的开销。
使用
获取CPU核数
修改 config/webpack.dev.js 和 config/webpack.prod.js
// nodejs核心模块,直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
安装依赖
npm i thread-loader -D
配置
// nodejs核心模块
const os = require('os')
...
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length
...
{
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 // 缓存文件不要压缩
}
}
]
},
...
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',// 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存目录
threads,//开启多进程
}),
...
// 配置多进程
new TerserPlugin({
parallel: threads // 开启多进程
})
...
在配置中有 css 压缩等,借用 optimization 优化配置
optimization: {
minimize: true,
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
]
}
完整配置文件
// nodejs核心模块
const os = require('os')
const path = require('path') // nodejs核心模块,用来处理路径问题
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: {
// 文件输出路径
// __dirname nodejs变量,代表当前文件的文件夹目录
path: path.resolve(__dirname, '../dist'),
// 入口文件打包输出文件名
filename: 'static/js/main.js',
clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [
{
oneOf: [
{
// 匹配css结尾文件
test: /\.css$/,
// loader执行顺序是从右到左
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
// 小于10kb的图片转base64
// 优点:减少请求数量 缺点:体积会增大三分之一
dataUrlCondition: {
maxSize: 20 * 1024 // 20kb
}
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
}
},
{
/**
* 处理图标字体、媒体等资源
* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
*/
test: /\.(ttf|woff2?|map4|map3|avi)$/,
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: [
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'),
inject: 'head'
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
// css压缩也可以写到optimization.minimizer里面,效果一样的
// new CssMinimizerPlugin(),
// 配置多进程
// new TerserPlugin({
// parallel: threads // 开启多进程
// })
],
optimization: {
minimize: true,
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
]
},
//开发服务器
// devServer: {
// host: '127.0.0.1', // 域名
// port: '3000', // 端口
// open: true, // 是否自动打开浏览器
// hot: true // 开启HMR
// },
// 模式
mode: 'production',
devtool: "source-map",
}
在文件比较少时,多进程速度可能会更慢,因为每个进行启动需要时间,文件数量较多时就会体现出多进程的优势了,速度就会变快。