SourceMap
devtool 配置
热模块替换
webpack serve 默认开启
CSS style loader 实现了
js 文件需要自己处理
// main.js
// ...
if (module.hot) { // 是否支持热模块替换
module.hot.accept('./js/some.js')
module.hot.accept('./js/some2.js')
}
oneOf
每个文件只能被其中一个 loader
配置处理
include 和 exclude
eslint 和 babel 缓存
提升第一次以后的打包编译速度, 因为只处理修改了 js 文件, 没有修改的文件使用缓存
// webpack.prod.js
// ...
rules: [
// ...
{
test: /\.js$/,
include: path.resolve(__dirname, "../src"),
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 缓存
cacheCompression: false, // 关闭缓存文件压缩
}
}
],
plugins: [
{
new ESLintPlugin({
context: path.resolve(__dirname, "../src"),
exclude: "node_modules",
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), // 指定生成缓存文件位置
})
}
]
//...
多进程打包
仅在特别耗时的操作中使用, 因为每个进程启动就有大约为600ms 左右的开销
// 获取CPU核数
const os = require("os")
// cpu 核数
const threads = os.cpus().length
# 下载包
npm i thread-loader -D
eslint babel terser 开启多进程处理
// webpack.prod.js
//...
// 获取CPU核数
const os = require("os")
// cpu 核数
const threads = os.cpus().length
const TersetWebpackPlugin = require("terser-webpack-plugin")
// ...
rules: [
// ...
{
test: /\.js$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 缓存
cacheCompression: false, // 关闭缓存文件压缩
}
}
]
}
],
plugins: [
// ...
new ESLintPlugin({
context: path.resolve(__dirname, "../src"),
exclude: "node_modules",
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), // 指定生成缓存文件位置
threads, // 开启多进程和设置进程数量
}),
//new TersetWebpackPlugin({
// parallel: threads // 开启多进程和设置进程数量
//})
// ...
],
optimization: {
// 压缩操作 webpack5 推荐放这里
minimizer: [
new CssMinimizerPlugin(),
new TersetWebpackPlugin({
parallel: threads // 开启多进程和设置进程数量
})
]
}
Tree Shaking
Tree Shaking
是一个术语, 通常用于描述移出 js 中没有用到的代码
依赖于 ES Module
减少 babel 生成文件的体积
babel 为编译的每个文件都插入了辅助代码, 使代码体积过大.
@babel/plugin-transform-runtime
: 禁用了 babel 自动对每个文件的 runtime 注入, 而是引入 @babel/plugin-transform-runtime
并且使所有辅助代码从这里引用.
npm i @babel/plugin-transform-runtime -D
// webpack.prod.js
// ...
rules: [
// ...
{
test: /\.js$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启 babel 缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"] // 使用 @babel/plugin-transform-runtime
}
}
]
}
],
// ...
标签:...,缓存,babel,开启,loader,webpack,js,优化 From: https://www.cnblogs.com/simdot/p/16626054.html