目录

一、SourceMap

1.1 简介

1.2 配置

1.2.1 cheap-module-source-map

1.2.2 source-map

二、提升打包构建速度

2.1 oneOf

2.2 Include/Exclude

2.3 Cache

2.4 Thead 

2.4.1 获取CPU核数

2.4.2 下载包

2.4.3 使用

一、SourceMap

Devtool | webpack 中文文档 (docschina.org)

1.1 简介

SourceMap(源代码映射):用来生成源代码与构建后代码一一映射的文件的方案。

当项目构建后,会将开发中的多个文件代码打包到一个文件中,经过压缩,去掉多余的空格,以及babel编译化后,最终会用于线上环境。经过这样处理后的代码与源代码会有很大区别。当遇到bug的时候,只能定位到构建后的代码位置,而无法定位到开发中代码的位置。

SourceMap(源代码映射)会生成一个 xxx.map 文件,里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,更快的找到错误根源

1.2 配置

SourceMap 的值有很多种情况,但主要关注 cheap-module-source-map 和 source-map

1.2.1 cheap-module-source-map

开发模式:cheap-module-source-map

优点:打包编译速度快,只包含行映射缺点:没有列映射

module.exports = {

// 其他省略

mode: "development",

devtool: "cheap-module-source-map",

};

1.2.2 source-map

生产模式:source-map

优点:包含行/列映射缺点:打包编译速度更慢

module.exports = {

// 其他省略

mode: "production",

devtool: "source-map",

};

二、提升打包构建速度

2.1 oneOf

打包时每个文件都会经过所有 loader 处理,使用 oneOf 后,只要匹配上一个 loader, 剩下的就不会继续匹配

使用:只需将loader配置放入 oneOf: [] 中即可

// 加载器

module: {

rules: [

{

oneOf: [

// loader的配置

// 省略...

],

},

],

},

2.2 Include/Exclude

include:包含,只处理 xxx 文件exclude:排除,除了 xxx 文件以外其他文件都处理

处理js文件,以排除node_modules目录下的文件为例

(第三方的库或插件下载完后都存放在 node_modules 中,这些文件是不需要编译可以直接使用的,所以对 js 文件处理时,要排除 node_modules 下面的文件)

使用 exclude:

{

test: /\.m?js$/,

exclude: /(node_modules)/, // 排除 node_modules下的文件

use: {

loader: "babel-loader",

},

},

使用include:

{

test: /\.m?js$/,

// exclude: /(node_modules)/, // 排除 node_modules下的文件

include: path.resolve(__dirname, "../src"), // 只处理src目录下文件,其他文件不处理

use: {

loader: "babel-loader",

},

},

2.3 Cache

对 Eslint 检查 和 Babel 编译结果进行缓存,这样再次打包时速度就会更快

使用:以Babel为例

{

test: /\.m?js$/,

include: path.resolve(__dirname, "../src"),

use: {

loader: "babel-loader",

options: {

cacheDirectory: true, // 开启babel缓存

cacheCompression: false, // 关闭缓存文件压缩

},

},

},

再次打包后,可在 node_modules 下找到缓存文件

2.4 Thead 

多进程打包:开启电脑的多个进程同时干一件事,速度更快。

注意:请仅在特别耗时的操作中使用,因为每个进程启动就有大约为 600ms 左右开销。

2.4.1 获取CPU核数

// nodejs核心模块,直接使用

const os = require("os");

// cpu核数

const threads = os.cpus().length;

2.4.2 下载包

npm i thread-loader -D

2.4.3 使用

以处理babel-loader为例

// Node.js的核心模块,专门用来处理路径问题

const os = require("os");

const path = require("path");

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;

module.exports = {

entry: "./src/main.js",

output: {

path: path.resolve(__dirname, "../dist"),

filename: "static/js/main.js",

clean: true,

},

module: {

rules: [

// loader的配置

{

oneOf: [

// 省略...

{

test: /\.m?js$/,

include: path.resolve(__dirname, "../src"),

use: [

{

loader: "thread-loader", // 开启多进程

options: {

workers: threads, // 数量

},

},

{

loader: "babel-loader",

options: {

cacheDirectory: true, // 开启babel缓存

cacheCompression: false, // 关闭缓存文件压缩

},

},

],

},

],

},

],

},

文章来源

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: