再学webpack
import()综合以上优化思路,可以有效减小 webpack 打包生成的文件体积,提升应用性能和加载速度。需要根据具体项目情况和需求,选择合适的优化策略和配置。
1 优化 webpack 打包体积的思路
优化 webpack 打包体积的思路包括:
- 提取第三方库或通过引用外部文件的方式引入第三方库:将第三方库单独打包,并通过 CDN 引入,减少打包体积。
- 使用代码压缩插件:例如
UglifyJsPlugin
,可以压缩 JavaScript 代码,减小文件体积。 - 启用服务器端的 Gzip 压缩:通过服务器端配置 Gzip 压缩,减少传输体积。
- 按需加载资源文件:使用
require.ensure
或动态导入(import()
)的方式按需加载资源文件,避免一次性加载所有资源,优化加载速度和体积。 - 优化 devtool 中的 source-map:选择合适的 devtool 配置,确保在开发阶段能够提供足够的错误追踪信息,但不会增加过多的打包体积。
- 剥离 CSS 文件:将 CSS 文件单独打包,通过
<link>
标签引入,利用浏览器的并行加载能力。 - 去除不必要的插件:检查 webpack 配置中的插件,移除不必要的插件或根据环境区分开发环境和生产环境的配置,避免将开发环境的调试工具打包到生产环境中。
除了上述优化思路,还可以考虑以下几点:
- 使用 Tree Shaking:通过配置 webpack,将未使用的代码在打包过程中消除,减少打包体积。
- 使用模块化引入:合理使用 ES6 模块化语法或其他模块化方案,按需引入模块,避免不必要的全局引入。
- 按需加载第三方库:对于较大的第三方库,可以考虑按需加载,而不是一次性全部引入。
- 优化图片资源:压缩图片,使用适当的图片格式,尽量减小图片体积。
- 优化字体文件:如果使用了大量的字体文件,可以考虑只引入需要的字体文件,避免全部引入。
- 使用缓存:通过配置合适的缓存策略,利用浏览器缓存机制,减少重复加载资源。
综合以上优化思路,可以有效减小 webpack 打包生成的文件体积,提升应用性能和加载速度。需要根据具体项目情况和需求,选择合适的优化策略和配置。
2 优化 webpack 打包效率的方法
- 使用增量构建和热更新:在开发环境下,使用增量构建和热更新功能,只重新构建修改过的模块,减少整体构建时间。
- 避免无意义的工作:在开发环境中,避免执行无意义的工作,如提取 CSS、计算文件
hash
等,以减少构建时间。 - 配置合适的 devtool:选择适当的 devtool 配置,提供足够的调试信息,但不会对构建性能产生太大影响。
- 选择合适的 loader:根据需要加载的资源类型选择高效的 loader,避免不必要的解析和处理过程。
- 启用 loader 缓存:对于耗时较长的 loader,如
babel-loader
,可以启用缓存功能,避免重复处理同一文件。 - 采用引入方式引入第三方库:对于第三方库,可以通过直接引入的方式(如 CDN 引入)来减少打包时间。
- 提取公共代码:通过配置 webpack 的 SplitChunks 插件,提取公共代码,避免重复打包相同的代码,提高打包效率。
- 优化构建时的搜索路径:指定需要构建的目录和不需要构建的目录,减少搜索范围,加快构建速度。
- 模块化引入需要的部分:使用按需引入的方式,只引入需要的模块或组件,避免加载不必要的代码,提高构建效率。
通过以上优化措施,可以有效提升 webpack 的打包效率,减少开发和构建时间,提升开发效率和用户体验。根据具体项目需求和场景,选择适合的优化方法进行配置和调整。
3 编写Loader
编写一个名为 reverse-txt-loader
的 Loader,实现对文本内容进行反转处理的功能。
// reverse-txt-loader.js
module.exports = function (source) {
// 对源代码进行处理,这里是将字符串反转
const reversedSource = source.split('').reverse().join('');
// 返回处理后的 JavaScript 代码作为模块输出
return `module.exports = '${reversedSource}';`;
};
上述代码定义了一个函数,该函数接收一个参数 source
,即原始的文本内容。在函数内部,我们将源代码进行反转处理,并将处理后的结果拼接成一个字符串,再通过 module.exports
输出为一个 JavaScript 模块。
要使用这个 Loader,需要在 webpack 配置中指定该 Loader 的路径:
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /.txt$/,
use: [
{
loader: './path/reverse-txt-loader'
}
]
}
]
}
// ...
};
上述配置将该 Loader 应用于所有以 .txt
结尾的文件。在构建过程中,当遇到需要加载的 .txt
文件时,会调用 reverse-txt-loader
对文件内容进行反转处理,并将处理后的结果作为模块的输出。
请注意,在实际使用中,需要根据实际路径修改 loader
配置的路径,并将该 Loader 安装在项目中。
4 编写plugin
编写一个自定义的 Webpack 插件需要创建一个 JavaScript 类,并在类中实现指定的生命周期方法。下面是一个简单的示例,展示如何编写一个自定义的 Webpack 插件:
class MyPlugin {
constructor(options) {
// 在构造函数中可以接收插件的配置参数
this.options = options;
}
// Webpack 在安装插件时会自动调用 apply 方法,并将 compiler 对象传递进来
apply(compiler) {
// 在适当的生命周期钩子中挂载插件的功能
// 示例:在 emit 生命周期钩子中添加自定义的功能
compiler.hooks.emit.tap('MyPlugin', (compilation) => {
// compilation 对象包含了当前构建过程的各种信息
// 可以在这里执行一些自定义的操作
// 示例:向输出的文件中添加自定义的注释
const comment = this.options.comment || 'Custom comment';
for (const asset in compilation.assets) {
if (compilation.assets.hasOwnProperty(asset)) {
compilation.assets[asset].source = () => {
return `/* ${comment} */\n` + compilation.assets[asset].source();
};
}
}
});
}
}
以上是一个简单的插件示例,它在构建过程中的 emit
生命周期钩子中向输出的文件添加了自定义的注释。你可以根据实际需求在其他生命周期钩子中实现不同的功能。
要使用该插件,在 webpack 的配置文件中进行如下配置:
const MyPlugin = require('./path/to/MyPlugin');
module.exports = {
// ...
plugins: [
new MyPlugin({
comment: 'Custom comment',
}),
],
};
这样,当你运行 webpack 构建时,该插件就会被应用,并执行指定的功能。
需要注意的是,Webpack 的插件机制非常灵活,可以根据实际需求编写各种各样的插件。插件可以监听多个生命周期钩子,并在每个生命周期钩子中实现自定义的功能。详细的插件开发文档可以参考 Webpack 官方文档。
5 说一下webpack的一些plugin,怎么使用webpack对项目进行优化
Webpack 提供了许多插件(Plugins)来帮助优化项目构建和性能。下面列举一些常用的插件以及它们的作用:
构建优化插件:
ContextReplacementPlugin
:用于限制某些模块的上下文,可以减少编译体积。IgnorePlugin
:用于忽略特定的模块,减少打包体积。babel-plugin-import
:用于按需加载和使用模块,减少打包体积。babel-plugin-transform-runtime
:将代码中的公共部分提取到一个单独的模块中,减少打包体积。happypack
、thread-loader
:实现并行编译,加快构建速度。uglifyjs-webpack-plugin
:通过并行压缩和缓存来加快代码压缩的速度。
性能优化插件:
Tree-shaking
:通过静态分析代码,去除未使用的代码,减少打包体积。Scope Hoisting
:将模块之间的关系进行静态分析,减少打包后的模块数量,提升代码执行速度。webpack-md5-plugin
:根据文件内容生成 hash,实现缓存的更新机制。splitChunksPlugin
:根据配置将代码拆分成多个块,实现按需加载和并行加载的效果。import()
、require.ensure
:动态导入模块,实现按需加载,提升页面加载速度。
除了使用这些插件,还可以通过配置 webpack 的其他参数来进一步优化项目,例如:
- 配置
devtool
:选择合适的 Source Map 类型,既满足调试需求又不影响构建速度。 - 配置
output
:使用chunkhash
或contenthash
生成文件名,实现长期缓存。 - 使用
cache-loader
、hard-source-webpack-plugin
、uglifyjs-webpack-plugin
等插件开启缓存,加速再次构建。 - 使用
DllWebpackPlugin
和DllReferencePlugin
预编译公共模块,减少重复构建时间。
综合使用这些插件和优化策略,可以显著提升 webpack 项目的构建效率和性能。但是需要根据具体的项目需求和场景选择合适的插件和优化方法。
6 webpack Plugin 和 Loader 的区别
Loader
用于对模块源码进行转换,将非 JavaScript 模块转换为 JavaScript 模块,或对模块进行预处理。它描述了webpack
如何处理不同类型的文件,比如将 Sass 文件转换为 CSS 文件,或将ES6
代码转换为ES5
代码。Loader
是针对单个文件的转换操作,通过配置rules
来匹配文件并指定相应的Loader
Plugin
用于扩展 webpack 的功能,解决Loader
无法解决的问题。Plugin
可以监听webpack
构建过程中的事件,并在特定的时机执行相应的操作。它可以在打包优化、资源管理、环境变量注入等方面提供额外的功能。Plugin 的功能范围更广泛,可以修改webpack
的内部行为,从而实现更复杂的构建需求。
总的来说,Loader
是用于处理模块源码的转换工具,而 Plugin
则是用于扩展 webpack
的功能,通过监听 webpack
构建过程中的事件来执行相应的操作。它们各自的作用和功能不同,但都可以用于优化和定制 webpack
的构建过程。在配置 webpack
时,我们可以通过配置 Loader
和 Plugin
来满足不同的需求,并实现对模块的转换和构建过程的定制化
7 tree shaking 的原理是什么
Tree shaking 的原理主要是基于静态分析的方式来实现无用代码的消除,从而减小最终打包生成的文件体积。它的工作原理可以简要概括如下:
- 采用
ES6 Module
语法:Tree shaking
只对ES6 Module
语法进行静态分析和优化。ES6 Module
的特点是可以进行静态分析,这意味着在编译阶段就能够确定模块之间的依赖关系。 - 静态分析模块依赖:在编译过程中,通过静态分析可以确定每个模块的依赖关系,以及模块中导出的函数、变量等信息。
- 标记未被引用的代码:在静态分析的过程中,会标记出那些未被其他模块引用的函数、变量和代码块。
- 消除未被引用的代码:在构建过程中,根据静态分析得到的标记信息,可以对未被引用的代码进行消除。这样,在最终生成的打包文件中,未被引用的代码将不会包含在内。
总结来说,Tree shaking 的核心思想是通过静态分析模块依赖关系,并标记和消除未被引用的代码。这样可以大大减小打包后的文件体积,提升应用的性能和加载速度。需要注意的是,Tree shaking 只对 ES6 Module 语法起作用,而对于 CommonJS 等其他模块系统则无法进行静态分析和优化。
8 common.js 和 es6 中模块引入的区别
CommonJS 是一种模块规范,最初被应用于 Nodejs,成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范,在 ES6 出来之前,前端也实现了一套相同的模块规范 (例如:
AMD
),用来对前端模块进行管理。自 ES6 起,引入了一套新的ES6 Module
规范,在语言标准的层面上实现了模块功能,而且实现得相当简单,有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对ES6 Module
兼容还不太好,我们平时在Webpack
中使用的export
和import
,会经过Babel
转换为CommonJS
规范
CommonJS 和 ES6 Module 在模块引入的方式和特性上有一些区别,主要包括以下几个方面:
- 输出方式:
CommonJS
输出的是一个值的拷贝,而ES6 Module
输出的是值的引用。在CommonJS
中,模块导出的值是被复制的,即使导出模块后修改了模块内部的值,也不会影响导入模块的值。而在ES6 Module
中,模块导出的值是引用关系,如果导出模块后修改了模块内部的值,会影响到导入模块的值 - 加载时机:
CommonJS
模块是运行时加载,也就是在代码执行到导入模块的位置时才会加载模块并执行。而ES6 Module
是编译时输出接口,也就是在代码编译阶段就会确定模块的依赖关系,并在运行前静态地解析模块的导入和导出 - 导出方式:
CommonJS
采用的是module.exports
导出,可以导出任意类型的值。ES6 Module
采用的是export
导出,只能导出具名的变量、函数、类等,而不能直接导出任意值 - 导入方式:
CommonJS
使用require()
来导入模块,可以使用动态语法,允许在条件语句中使用。ES6 Module
使用import
来导入模块,它是静态语法,只能写在模块的顶层,不能写在条件语句中 - this 指向:
CommonJS
模块中的this
指向当前模块的exports
对象,而不是全局对象。ES6 Module
中的this
默认是undefined
,在模块中直接使用this
会报错
总的来说,
CommonJS
主要用于服务器端的模块化开发,运行时加载,更适合动态加载模块,而ES6 Module
是在语言层面上实现的模块化方案,静态编译,更适合在构建时进行模块依赖的静态分析和优化。在前端开发中,通常使用打包工具(如webpack
)将ES6 Module
转换为CommonJS
或其他模块规范,以实现在浏览器环境中的兼容性。
9 babel原理
Babel 是一个 JavaScript 编译器。他把最新版的 javascript 编译成当下可以执行的版本,简言之,利用 babel 就可以让我们在当前的项目中随意的使用这些新最新的 es6,甚至 es7 的语法
ES6、7
代码输入 ->babylon
进行解析 -> 得到AST
(抽象语法树)->plugin
用babel-traverse
对AST
树进行遍历转译 ->得到新的AST
树->用babel-generator
通过AST
树生成ES5
代码
它的工作流程包括解析(parse)、转换(transform)和生成(generate)三个主要步骤
- 解析(parse) :Babel 使用解析器(如
Babylon
)将输入的 JavaScript 代码解析成抽象语法树(AST)。解析器将代码分析成语法结构,并生成对应的 AST,表示代码的抽象语法结构。这个阶段包括词法分析和语法分析。词法分析将源代码转换为一个个标记(tokens)的流,而语法分析则将这个标记流转换为 AST 的形式。 - 转换(transform) :在转换阶段,Babel 使用插件(plugins)对 AST 进行遍历和转换。插件可以对 AST 进行增删改查的操作,可以根据需求对语法进行转换、代码优化等。Babel 的插件系统非常灵活,可以根据需要自定义插件或使用现有插件来进行代码转换。
- 生成(generate) :在生成阶段,Babel 使用生成器(如
babel-generator
)将经过转换的 AST 转换回字符串形式的 JavaScript 代码。生成器会深度优先遍历 AST,并根据 AST 的节点类型生成对应的代码字符串,最终将代码字符串输出。
通过以上三个步骤,Babel 实现了将最新版本的 JavaScript 代码转换为向后兼容的代码,使得开发者可以在当前环境中使用较新的 JavaScript 特性和语法。同时,Babel 还提供了一些常用的插件和预设(presets),以便开发者快速配置和使用常见的转换规则,如转换 ES6、ES7 语法、处理模块化、转换 JSX 等。
总的来说,Babel 的原理是通过解析、转换和生成的过程,将新版本的 JavaScript 代码转换为兼容旧环境的代码,使开发者能够在当前环境中使用较新的 JavaScript 特性和语法。
1 介绍一下 webpack 的构建流程
核心概念
entry
:入口。webpack是基于模块的,使用webpack首先需要指定模块解析入口(entry),webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。output
:输出。源代码经过webpack处理之后的最终产物。loader
:模块转换器。本质就是一个函数,在该函数中对接收到的内容进行转换,返回转换后的结果。因为 Webpack 只认识 JavaScript,所以 Loader 就成了翻译官,对其他类型的资源进行转译的预处理工作。plugin
:扩展插件。基于事件流框架Tapable
,插件可以扩展 Webpack 的功能,在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。module
:模块。除了js范畴内的es module、commonJs、AMD
等,css @import、url(...)
、图片、字体等在webpack中都被视为模块。
解释几个 webpack 中的术语
module
:指在模块化编程中我们把应用程序分割成的独立功能的代码模块chunk
:指模块间按照引用关系组合成的代码块,一个chunk
中可以包含多个module
chunk group
:指通过配置入口点(entry point
)区分的块组,一个chunk group
中可包含一到多个 chunkbundling
:webpack 打包的过程asset/bundle
:打包产物
webpack 的打包思想可以简化为 3 点:
- 一切源代码文件均可通过各种
Loader
转换为 JS 模块 (module
),模块之间可以互相引用。 - webpack 通过入口点(
entry point
)递归处理各模块引用关系,最后输出为一个或多个产物包js(bundle)
文件。 - 每一个入口点都是一个块组(
chunk group
),在不考虑分包的情况下,一个chunk group
中只有一个chunk
,该 chunk 包含递归分析后的所有模块。每一个chunk
都有对应的一个打包后的输出文件(asset/bundle
)
打包流程
- 初始化参数:从配置文件和 Shell 语句中读取并合并参数,得出最终的配置参数。
- 开始编译:从上一步得到的参数初始化
Compiler
对象,加载所有配置的插件,执行对象的run
方法开始执行编译。 - 确定入口:根据配置中的
entry
找出所有的入口文件。 - 编译模块:从入口文件出发,调用所有配置的
loader
对模块进行翻译,再找出该模块依赖的模块,这个步骤是递归执行的,直至所有入口依赖的模块文件都经过本步骤的处理。 - 完成模块编译:经过第 4 步使用 loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
chunk
,再把每个chunk
转换成一个单独的文件加入到输出列表,这一步是可以修改输出内容的最后机会。 - 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
简版
- Webpack CLI 启动打包流程;
- 载入 Webpack 核心模块,创建
Compiler
对象; - 使用
Compiler
对象开始编译整个项目; - 从入口文件开始,解析模块依赖,形成依赖关系树;
- 递归依赖树,将每个模块交给对应的 Loader 处理;
- 合并 Loader 处理完的结果,将打包结果输出到 dist 目录。
在以上过程中,
Webpack 会在特定的时间点广播出特定的事件
,插件在监听到相关事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
构建流程核心概念:
Tapable
:一个基于发布订阅的事件流工具类,Compiler
和Compilation
对象都继承于Tapable
Compiler
:compiler对象是一个全局单例,他负责把控整个webpack打包的构建流程。在编译初始化阶段被创建的全局单例,包含完整配置信息、loaders
、plugins以及各种工具方法Compilation
:代表一次 webpack 构建和生成编译资源的的过程,在watch
模式下每一次文件变更触发的重新编译都会生成新的Compilation
对象,包含了当前编译的模块module
, 编译生成的资源,变化的文件, 依赖的状态等- 而每个模块间的依赖关系,则依赖于
AST
语法树。每个模块文件在通过Loader解析完成之后,会通过acorn
库生成模块代码的AST语法树,通过语法树就可以分析这个模块是否还有依赖的模块,进而继续循环执行下一个模块的编译解析。
最终Webpack
打包出来的bundle
文件是一个IIFE
的执行函数。
// webpack 5 打包的bundle文件内容
(() => { // webpackBootstrap
var __webpack_modules__ = ({
'file-A-path': ((modules) => { // ... })
'index-file-path': ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { // ... })
})
// The module cache
var __webpack_module_cache__ = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// Create a new module (and put it into the cache)
var module = __webpack_module_cache__[moduleId] = {
// no module.id needed
// no module.loaded needed
exports: {}
};
// Execute the module function
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
// Return the exports of the module
return module.exports;
}
// startup
// Load entry module and return exports
// This entry module can't be inlined because the eval devtool is used.
var __webpack_exports__ = __webpack_require__("./src/index.js");
})
webpack详细工作流程
2 介绍 Loader
常用 Loader:
file-loader
: 加载文件资源,如 字体 / 图片 等,具有移动/复制/命名等功能;url-loader
: 通常用于加载图片,可以将小图片直接转换为 Date Url,减少请求;babel-loader
: 加载 js / jsx 文件, 将 ES6 / ES7 代码转换成 ES5,抹平兼容性问题;ts-loader
: 加载 ts / tsx 文件,编译 TypeScript;style-loader
: 将 css 代码以<style>
标签的形式插入到 html 中;css-loader
: 分析@import和url(),引用 css 文件与对应的资源;postcss-loader
: 用于 css 的兼容性处理,具有众多功能,例如 添加前缀,单位转换 等;less-loader / sass-loader
: css预处理器,在 css 中新增了许多语法,提高了开发效率;
编写原则:
- 单一原则: 每个 Loader 只做一件事;
- 链式调用: Webpack 会按顺序链式调用每个 Loader;
- 统一原则: 遵循 Webpack制定的设计规则和结构,输入与输出均为字符串,各个 Loader 完全独立,即插即用;
3 介绍 plugin
插件系统是 Webpack 成功的一个关键性因素。在编译的整个生命周期中,Webpack 会触发许多事件钩子,Plugin 可以监听这些事件,根据需求在相应的时间点对打包内容进行定向的修改。
一个最简单的 plugin 是这样的:
class Plugin{
// 注册插件时,会调用 apply 方法
// apply 方法接收 compiler 对象
// 通过 compiler 上提供的 Api,可以对事件进行监听,执行相应的操作
apply(compiler){
// compilation 是监听每次编译循环
// 每次文件变化,都会生成新的 compilation 对象并触发该事件
compiler.plugin('compilation',function(compilation) {})
}
}
注册插件:
// webpack.config.js
module.export = {
plugins:[
new Plugin(options),
]
}
事件流机制:
Webpack 就像工厂中的一条产品流水线。原材料经过 Loader 与 Plugin 的一道道处理,最后输出结果。
- 通过链式调用,按顺序串起一个个 Loader;
- 通过事件流机制,让 Plugin 可以插入到整个生产过程中的每个步骤中;
Webpack 事件流编程范式的核心是基础类 Tapable,是一种 观察者模式 的实现事件的订阅与广播:
const { SyncHook } = require("tapable")
const hook = new SyncHook(['arg'])
// 订阅
hook.tap('event', (arg) => {
// 'event-hook'
console.log(arg)
})
// 广播
hook.call('event-hook')
Webpack
中两个最重要的类Compiler
与Compilation
便是继承于Tapable
,也拥有这样的事件流机制。
-
Compiler: 可以简单的理解为 Webpack 实例,它包含了当前 Webpack 中的所有配置信息,如 options, loaders, plugins 等信息,全局唯一,只在启动时完成初始化创建,随着生命周期逐一传递;
-
Compilation
: 可以称为 编译实例。当监听到文件发生改变时,Webpack 会创建一个新的 Compilation 对象,开始一次新的编译。它包含了当前的输入资源,输出资源,变化的文件等,同时通过它提供的 api,可以监听每次编译过程中触发的事件钩子; -
区别:
Compiler
全局唯一,且从启动生存到结束;Compilation
对应每次编译,每轮编译循环均会重新创建;
-
常用 Plugin:
- UglifyJsPlugin: 压缩、混淆代码;
- CommonsChunkPlugin: 代码分割;
- ProvidePlugin: 自动加载模块;
- html-webpack-plugin: 加载 html 文件,并引入 css / js 文件;
- extract-text-webpack-plugin / mini-css-extract-plugin: 抽离样式,生成 css 文件; DefinePlugin: 定义全局变量;
- optimize-css-assets-webpack-plugin: CSS 代码去重;
- webpack-bundle-analyzer: 代码分析;
- compression-webpack-plugin: 使用 gzip 压缩 js 和 css;
- happypack: 使用多进程,加速代码构建;
- EnvironmentPlugin: 定义环境变量;
-
调用插件
apply
函数传入compiler
对象 -
通过
compiler
对象监听事件
loader和plugin有什么区别?
webapck默认只能打包JS和JOSN模块,要打包其它模块,需要借助loader,loader就可以让模块中的内容转化成webpack或其它laoder可以识别的内容。
loader
就是模块转换化,或叫加载器。不同的文件,需要不同的loader
来处理。plugin
是插件,可以参与到整个webpack打包的流程中,不同的插件,在合适的时机,可以做不同的事件。
webpack中都有哪些插件,这些插件有什么作用?
html-webpack-plugin
自动创建一个HTML文件,并把打包好的JS插入到HTML文件中clean-webpack-plugin
在每一次打包之前,删除整个输出文件夹下所有的内容mini-css-extrcat-plugin
抽离CSS代码,放到一个单独的文件中optimize-css-assets-plugin
压缩css
4 webpack 热更新实现原理
HMR 的基本流程图
- 当修改了一个或多个文件;
- 文件系统接收更改并通知
webpack
; webpack
重新编译构建一个或多个模块,并通知 HMR 服务器进行更新;HMR Server
使用webSocket
通知HMR runtime
需要更新,HMR
运行时通过HTTP
请求更新jsonp
HMR
运行时替换更新中的模块,如果确定这些模块无法更新,则触发整个页面刷新
5 webpack 层面如何做性能优化
优化前的准备工作
- 准备基于时间的分析工具:我们需要一类插件,来帮助我们统计项目构建过程中在编译阶段的耗时情况。
speed-measure-webpack-plugin
分析插件加载的时间 - 使用
webpack-bundle-analyzer
分析产物内容
代码优化:
无用代码消除,是许多编程语言都具有的优化手段,这个过程称为 DCE (dead code elimination),即 删除不可能执行的代码;
例如我们的 UglifyJs
,它就会帮我们在生产环境中删除不可能被执行的代码,例如:
var fn = function() {
return 1;
// 下面代码便属于 不可能执行的代码;
// 通过 UglifyJs (Webpack4+ 已内置) 便会进行 DCE;
var a = 1;
return a;
}
摇树优化 (Tree-shaking),这是一种形象比喻。我们把打包后的代码比喻成一棵树,这里其实表示的就是,通过工具 “摇” 我们打包后的 js 代码,将没有使用到的无用代码 “摇” 下来 (删除)。即 消除那些被 引用了但未被使用 的模块代码。
-
原理: 由于是在编译时优化,因此最基本的前提就是语法的静态分析,ES6的模块机制 提供了这种可能性。不需要运行时,便可进行代码字面上的静态分析,确定相应的依赖关系。
-
问题: 具有 副作用 的函数无法被
tree-shaking
- 在引用一些第三方库,需要去观察其引入的代码量是不是符合预期;
- 尽量写纯函数,减少函数的副作用;
- 可使用
webpack-deep-scope-plugin
,可以进行作用域分析,减少此类情况的发生,但仍需要注意;
code-spliting: 代码分割技术,将代码分割成多份进行 懒加载 或 异步加载,避免打包成一份后导致体积过大,影响页面的首屏加载;
-
Webpack
中使用SplitChunksPlugin
进行拆分; -
按 页面 拆分: 不同页面打包成不同的文件;
-
按 功能 拆分:
- 将类似于播放器,计算库等大模块进行拆分后再懒加载引入;
- 提取复用的业务代码,减少冗余代码;
-
按 文件修改频率 拆分: 将第三方库等不常修改的代码单独打包,而且不改变其文件 hash 值,能最大化运用浏览器的缓存;
scope hoisting: 作用域提升,将分散的模块划分到同一个作用域中,避免了代码的重复引入,有效减少打包后的代码体积和运行时的内存损耗;
编译性能优化:
-
升级至 最新 版本的
webpack
,能有效提升编译性能; -
使用
dev-server
/ 模块热替换 (HMR
) 提升开发体验;- 监听文件变动 忽略 node_modules 目录能有效提高监听时的编译效率;
-
缩小编译范围
modules
: 指定模块路径,减少递归搜索;mainFields
: 指定入口文件描述字段,减少搜索;noParse
: 避免对非模块化文件的加载;includes/exclude
: 指定搜索范围/排除不必要的搜索范围;alias
: 缓存目录,避免重复寻址;
-
babel-loader
- 忽略
node_moudles
,避免编译第三方库中已经被编译过的代码 - 使用
cacheDirectory
,可以缓存编译结果,避免多次重复编译
- 忽略
-
多进程并发
webpack-parallel-uglify-plugin
: 可多进程并发压缩 js 文件,提高压缩速度;HappyPack
: 多进程并发文件的Loader
解析;
-
第三方库模块缓存:
DLLPlugin
和DLLReferencePlugin
可以提前进行打包并缓存,避免每次都重新编译;
-
使用分析
Webpack Analyse / webpack-bundle-analyzer
对打包后的文件进行分析,寻找可优化的地方- 配置profile:true,对各个编译阶段耗时进行监控,寻找耗时最多的地方
-
source-map
:- 开发:
cheap-module-eval-source-map
- 生产:
hidden-source-map
;
- 开发:
优化webpack打包速度
-
减少文件搜索范围
- 比如通过别名
loader
的test
,include & exclude
-
Webpack4
默认压缩并行 -
Happypack
并发调用 -
babel
也可以缓存编译 -
Resolve
在构建时指定查找模块文件的规则 -
使用
DllPlugin
,不用每次都重新构建 -
externals
和DllPlugin
解决的是同一类问题:将依赖的框架等模块从构建过程中移除。它们的区别在于- 在 Webpack 的配置方面,
externals
更简单,而DllPlugin
需要独立的配置文件。 DllPlugin
包含了依赖包的独立构建流程,而externals
配置中不包含依赖框架的生成方式,通常使用已传入 CDN 的依赖包externals
配置的依赖包需要单独指定依赖模块的加载方式:全局对象、CommonJS、AMD 等- 在引用依赖包的子模块时,
DllPlugin
无须更改,而externals
则会将子模块打入项目包中
- 在 Webpack 的配置方面,
优化打包体积
-
提取第三方库或通过引用外部文件的方式引入第三方库
-
代码压缩插件
UglifyJsPlugin
-
服务器启用
gzip
压缩 -
按需加载资源文件
require.ensure
-
优化
devtool
中的source-map
-
剥离
css
文件,单独打包 -
去除不必要插件,通常就是开发环境与生产环境用同一套配置文件导致
-
Tree Shaking
在构建打包过程中,移除那些引入但未被使用的无效代码 -
开启
scope hosting
- 体积更小
- 创建函数作用域更小
- 代码可读性更好
6 介绍一下 Tree Shaking
对tree-shaking的了解
作用:
它表示在打包的时候会去除一些无用的代码
原理:
ES6
的模块引入是静态分析的,所以在编译时能正确判断到底加载了哪些模块- 分析程序流,判断哪些变量未被使用、引用,进而删除此代码
特点:
- 在生产模式下它是默认开启的,但是由于经过
babel
编译全部模块被封装成IIFE
,它存在副作用无法被tree-shaking
掉 - 可以在
package.json
中配置sideEffects
来指定哪些文件是有副作用的。它有两种值,一个是布尔类型,如果是false
则表示所有文件都没有副作用;如果是一个数组的话,数组里的文件路径表示改文件有副作用 rollup
和webpack
中对tree-shaking
的层度不同,例如对babel
转译后的class
,如果babel
的转译是宽松模式下的话(也就是loose
为true
),webpack
依旧会认为它有副作用不会tree-shaking
掉,而rollup
会。这是因为rollup
有程序流分析的功能,可以更好的判断代码是否真正会产生副作用。
原理
ES6 Module
引入进行静态分析,故而编译的时候正确判断到底加载了那些模块- 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码
依赖于
import/export
通过导入所有的包后再进行条件获取。如下:
import foo from "foo";
import bar from "bar";
if(condition) {
// foo.xxxx
} else {
// bar.xxx
}
ES6的import语法完美可以使用tree shaking,因为可以在代码不运行的情况下就能分析出不需要的代码
CommonJS的动态特性模块意味着tree shaking不适用。因为它是不可能确定哪些模块实际运行之前是需要的或者是不需要的。在ES6中,进入了完全静态的导入语法:import。这也意味着下面的导入是不可行的:
// 不可行,ES6 的import是完全静态的
if(condition) {
myDynamicModule = require("foo");
} else {
myDynamicModule = require("bar");
}
7 介绍一下 webpack scope hosting
作用域提升,将分散的模块划分到同一个作用域中,避免了代码的重复引入,有效减少打包后的代码体积和运行时的内存损耗;
8 Webpack Proxy工作原理?为什么能解决跨域
1. 是什么
webpack proxy
,即webpack
提供的代理服务
基本行为就是接收客户端发送的请求后转发给其他服务器
其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)
想要实现代理首先需要一个中间服务器,webpack
中提供服务器的工具为webpack-dev-server
2. webpack-dev-server
webpack-dev-server
是 webpack
官方推出的一款开发工具,将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起
目的是为了提高开发者日常的开发效率,「只适用在开发阶段」
关于配置方面,在webpack
配置对象属性中通过devServer
属性提供,如下:
// ./webpack.config.js
const path = require('path')
module.exports = {
// ...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
proxy: {
'/api': {
target: 'https://api.github.com'
}
}
// ...
}
}
devServetr
里面proxy
则是关于代理的配置,该属性为对象的形式,对象中每一个属性就是一个代理的规则匹配
属性的名称是需要被代理的请求路径前缀,一般为了辨别都会设置前缀为/api
,值为对应的代理匹配规则,对应如下:
target
:表示的是代理到的目标地址pathRewrite
:默认情况下,我们的/api-hy
也会被写入到URL中,如果希望删除,可以使用pathRewrite
secure
:默认情况下不接收转发到https
的服务器上,如果希望支持,可以设置为false
changeOrigin
:它表示是否更新代理后请求的headers
中host
地址
2. 工作原理
proxy
工作原理实质上是利用http-proxy-middleware
这个http
代理中间件,实现请求转发给其他服务器
举个例子:
在开发阶段,本地地址为http://localhost:3000
,该浏览器发送一个前缀带有/api
标识的请求到服务端获取数据,但响应这个请求的服务器只是将请求转发到另一台服务器中
const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
3. 跨域
在开发阶段,
webpack-dev-server
会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在localhost
的一个端口上,而后端服务又是运行在另外一个地址上
所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题
通过设置webpack proxy
实现代理请求后,相当于浏览器与服务端中添加一个代理者
当本地发送请求的时候,代理服务器响应该请求,并将请求转发到目标服务器,目标服务器响应数据后再将数据返回给代理服务器,最终再由代理服务器将数据响应给本地
在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,这时候浏览器就能正常接收数据
注意:
「服务器与服务器之间请求数据并不会存在跨域行为,跨域行为是浏览器安全策略限制」
9 介绍一下 babel原理
babel
的编译过程分为三个阶段:parsing、transforming、generating,以 ES6 编译为 ES5 作为例子:
ES6
代码输入;babylon
进行解析得到 AST;plugin
用babel-traverse
对AST
树进行遍历编译,得到新的AST
树;- 用
babel-generator
通过AST
树生成ES5
代码。
10 介绍一下Rollup
Rollup 是一款 ES Modules 打包器。它也可以将项目中散落的细小模块打包为整块代码,从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。
Rollup优势:
- 输出结果更加扁平,执行效率更高;
- 自动移除未引用代码;
- 打包结果依然完全可读。
缺点
- 加载非 ESM 的第三方模块比较复杂;
- 因为模块最终都被打包到全局中,所以无法实现
HMR
; - 浏览器环境中,代码拆分功能必须使用
Require.js
这样的AMD
库
- 我们发现如果我们开发的是一个应用程序,需要大量引用第三方模块,同时还需要 HMR 提升开发体验,而且应用过大就必须要分包。那这些需求 Rollup 都无法满足。
- 如果我们是开发一个 JavaScript 框架或者库,那这些优点就特别有必要,而缺点呢几乎也都可以忽略,所以在很多像 React 或者 Vue 之类的框架中都是使用的 Rollup 作为模块打包器,而并非 Webpack
总结一下:Webpack 大而全,Rollup 小而美
。
在对它们的选择上,我的基本原则是:应用开发使用 Webpack,类库或者框架开发使用 Rollup
。
不过这并不是绝对的标准,只是经验法则。因为 Rollup 也可用于构建绝大多数应用程序,而 Webpack 同样也可以构建类库或者框架。
hash、chunkhash、contenthash区别
- 如果是
hash
的话,是和整个项目有关的,有一处文件发生更改则所有文件的hash
值都会发生改变且它们共用一个hash
值; - 如果是
chunkhash
的话,只和entry
的每个入口文件有关,也就是同一个chunk
下的文件有所改动该chunk
下的文件的hash
值就会发生改变 - 如果是
contenthash
的话,和每个生成的文件有关,只有当要构建的文件内容发生改变时才会给该文件生成新的hash
值,并不会影响其它文件。
11 webpack常用插件总结
1. 功能类
1.1 html-webpack-plugin
自动生成
html
,基本用法:
new HtmlWebpackPlugin({
filename: 'index.html', // 生成文件名
template: path.join(process.cwd(), './index.html') // 模班文件
})
1.2 copy-webpack-plugin
拷贝资源插件
new CopyWebpackPlugin([
{
from: path.join(process.cwd(), './vendor/'),
to: path.join(process.cwd(), './dist/'),
ignore: ['*.json']
}
])
1.3 webpack-manifest-plugin && assets-webpack-plugin
俩个插件效果一致,都是生成编译结果的资源单,只是资源单的数据结构不一致而已
webpack-manifest-plugin 基本用法
module.exports = {
plugins: [
new ManifestPlugin()
]
}
assets-webpack-plugin 基本用法
module.exports = {
plugins: [
new AssetsPlugin()
]
}
1.4 clean-webpack-plugin
在编译之前清理指定目录指定内容
// 清理目录
const pathsToClean = [
'dist',
'build'
]
// 清理参数
const cleanOptions = {
exclude: ['shared.js'], // 跳过文件
}
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions)
]
}
1.5 compression-webpack-plugin
提供带
Content-Encoding
编码的压缩版的资源
module.exports = {
plugins: [
new CompressionPlugin()
]
}
1.6 progress-bar-webpack-plugin
编译进度条插件
module.exports = {
//...
plugins: [
new ProgressBarPlugin()
]
}
2. 代码相关类
2.1 webpack.ProvidePlugin
自动加载模块,如
$
出现,就会自动加载模块;$
默认为'jquery'
的exports
new webpack.ProvidePlugin({
$: 'jquery',
})
2.2 webpack.DefinePlugin
定义全局常量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
2.3 mini-css-extract-plugin && extract-text-webpack-plugin
提取css样式,对比
mini-css-extract-plugin
为webpack4
及以上提供的plugin
,支持css chunk
extract-text-webpack-plugin
只能在webpack3
及一下的版本使用,不支持css chunk
基本用法 extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
基本用法 mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/' // chunk publicPath
}
},
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css", // 主文件名
chunkFilename: "[id].css" // chunk文件名
})
]
}
3. 编译结果优化类
3.1 wbepack.IgnorePlugin
忽略
regExp
匹配的模块
new webpack.IgnorePlugin(/^./locale$/, /moment$/)
3.2 uglifyjs-webpack-plugin
代码丑化,用于js压缩
module.exports = {
//...
optimization: {
minimizer: [new UglifyJsPlugin({
cache: true, // 开启缓存
parallel: true, // 开启多线程编译
sourceMap: true, // 是否sourceMap
uglifyOptions: { // 丑化参数
comments: false,
warnings: false,
compress: {
unused: true,
dead_code: true,
collapse_vars: true,
reduce_vars: true
},
output: {
comments: false
}
}
}]
}
};
3.3 optimize-css-assets-webpack-plugin
css压缩,主要使用
cssnano
压缩器 https://github.com/cssnano/cssnano
module.exports = {
//...
optimization: {
minimizer: [new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'), // css 压缩优化器
cssProcessorOptions: { discardComments: { removeAll: true } } // 去除所有注释
})]
}
};
3.4 webpack-md5-hash
使你的
chunk
根据内容生成md5
,用这个md5
取代webpack chunkhash
。
var WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
// ...
output: {
//...
chunkFilename: "[chunkhash].[id].chunk.js"
},
plugins: [
new WebpackMd5Hash()
]
};
3.5 SplitChunksPlugin
CommonChunkPlugin
的后世,用于chunk
切割。
webpack
把chunk
分为两种类型,一种是初始加载initial chunk
,另外一种是异步加载async chunk
,如果不配置SplitChunksPlugin
,webpack
会在production
的模式下自动开启,默认情况下,webpack
会将node_modules
下的所有模块定义为异步加载模块,并分析你的entry
、动态加载(import()
、require.ensure
)模块,找出这些模块之间共用的node_modules
下的模块,并将这些模块提取到单独的chunk
中,在需要的时候异步加载到页面当中,其中默认配置如下
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async', // 异步加载chunk
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~', // 文件名中chunk分隔符
name: true,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/, //
priority: -10
},
default: {
minChunks: 2, // 最小的共享chunk数
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
4. 编译优化类
4.1 DllPlugin && DllReferencePlugin && autodll-webpack-plugin
dllPlugin
将模块预先编译,DllReferencePlugin
将预先编译好的模块关联到当前编译中,当webpack
解析到这些模块时,会直接使用预先编译好的模块。autodll-webpack-plugin
相当于dllPlugin
和DllReferencePlugin
的简化版,其实本质也是使用dllPlugin && DllReferencePlugin
,它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中,第二次编译的时候,解析到这些模块就直接使用缓存,而不是去编译这些模块
dllPlugin 基本用法:
const output = {
filename: '[name].js',
library: '[name]_library',
path: './vendor/'
}
module.exports = {
entry: {
vendor: ['react', 'react-dom'] // 我们需要事先编译的模块,用entry表示
},
output: output,
plugins: [
new webpack.DllPlugin({ // 使用dllPlugin
path: path.join(output.path, `${output.filename}.json`),
name: output.library // 全局变量名, 也就是 window 下 的 [output.library]
})
]
}
DllReferencePlugin 基本用法:
const manifest = path.resolve(process.cwd(), 'vendor', 'vendor.js.json')
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
manifest: require(manifest), // 引进dllPlugin编译的json文件
name: 'vendor_library' // 全局变量名,与dllPlugin声明的一致
}
]
}
autodll-webpack-plugin 基本用法:
module.exports = {
plugins: [
new AutoDllPlugin({
inject: true, // 与 html-webpack-plugin 结合使用,注入html中
filename: '[name].js',
entry: {
vendor: [
'react',
'react-dom'
]
}
})
]
}
4.2 happypack && thread-loader
多线程编译,加快编译速度,
thread-loader
不可以和mini-css-extract-plugin
结合使用
happypack 基本用法
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const happyLoaderId = 'happypack-for-react-babel-loader';
module.exports = {
module: {
rules: [{
test: /.jsx?$/,
loader: 'happypack/loader',
query: {
id: happyLoaderId
},
include: [path.resolve(process.cwd(), 'src')]
}]
},
plugins: [new HappyPack({
id: happyLoaderId,
threadPool: happyThreadPool,
loaders: ['babel-loader']
})]
}
thread-loader 基本用法
module.exports = {
module: {
rules: [
{
test: /.js$/,
include: path.resolve("src"),
use: [
"thread-loader",
// your expensive loader (e.g babel-loader)
"babel-loader"
]
}
]
}
}
4.3 hard-source-webpack-plugin && cache-loader
使用模块编译缓存,加快编译速度
hard-source-webpack-plugin 基本用法
module.exports = {
plugins: [
new HardSourceWebpackPlugin()
]
}
cache-loader 基本用法
module.exports = {
module: {
rules: [
{
test: /.ext$/,
use: [
'cache-loader',
...loaders
],
include: path.resolve('src')
}
]
}
}
5. 编译分析类
5.1 webpack-bundle-analyzer
编译模块分析插件
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8889,
reportFilename: 'report.html',
defaultSizes: 'parsed',
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'
}),
5.2 stats-webpack-plugin && PrefetchPlugin
stats-webpack-plugin
将构建的统计信息写入文件,该文件可在 http://webpack.github.io/analyse中上传进行编译分析,并根据分析结果,可使用PrefetchPlugin
对部分模块进行预解析编译
stats-webpack-plugin 基本用法:
module.exports = {
plugins: [
new StatsPlugin('stats.json', {
chunkModules: true,
exclude: [/node_modules[\/]react/]
})
]
};
PrefetchPlugin 基本用法:
module.exports = {
plugins: [
new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];
}
5.3 speed-measure-webpack-plugin
统计编译过程中,各
loader
和plugin
使用的时间
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = {
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
}
module.exports = smp.wrap(webpackConfig);
12 webpack热更新原理
- 当修改了一个或多个文件;
- 文件系统接收更改并通知
webpack
; webpack
重新编译构建一个或多个模块,并通知HMR
服务器进行更新;HMR Server
使用webSocket
通知HMR runtime
需要更新,HMR
运行时通过HTTP
请求更新jsonp
HMR
运行时替换更新中的模块,如果确定这些模块无法更新,则触发整个页面刷新
13 webpack原理简述
1.1 核心概念
JavaScript 的 模块打包工具 (module bundler)。通过分析模块之间的依赖,最终将所有模块打包成一份或者多份代码包 (bundler),供 HTML 直接引用。实质上,Webpack 仅仅提供了 打包功能 和一套 文件处理机制,然后通过生态中的各种 Loader 和 Plugin 对代码进行预编译和打包。因此 Webpack 具有高度的可拓展性,能更好的发挥社区生态的力量。
- Entry: 入口文件,
Webpack
会从该文件开始进行分析与编译; - Output: 出口路径,打包后创建
bundler
的文件路径以及文件名; - Module: 模块,在
Webpack
中任何文件都可以作为一个模块,会根据配置的不同的Loader
进行加载和打包; - Chunk: 代码块,可以根据配置,将所有模块代码合并成一个或多个代码块,以便按需加载,提高性能;
- Loader: 模块加载器,进行各种文件类型的加载与转换;
- Plugin: 拓展插件,可以通过
Webpack
相应的事件钩子,介入到打包过程中的任意环节,从而对代码按需修改;
1.2 工作流程 (加载 - 编译 - 输出)
- 读取配置文件,按命令 初始化 配置参数,创建
Compiler
对象; - 调用插件的
apply
方法 挂载插件 监听,然后从入口文件开始执行编译; - 按文件类型,调用相应的
Loader
对模块进行 编译,并在合适的时机点触发对应的事件,调用Plugin
执行,最后再根据模块 依赖查找 到所依赖的模块,递归执行第三步; - 将编译后的所有代码包装成一个个代码块 (
Chunk
), 并按依赖和配置确定 输出内容。这个步骤,仍然可以通过Plugin
进行文件的修改; - 最后,根据
Output
把文件内容一一写入到指定的文件夹中,完成整个过程;
1.3 模块包装
(function(modules) {
// 模拟 require 函数,从内存中加载模块;
function __webpack_require__(moduleId) {
// 缓存模块
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 执行代码;
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag: 标记是否加载完成;
module.l = true;
return module.exports;
}
// ...
// 开始执行加载入口文件;
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
"./src/index.js": function (module, __webpack_exports__, __webpack_require__) {
// 使用 eval 执行编译后的代码;
// 继续递归引用模块内部依赖;
// 实际情况并不是使用模板字符串,这里是为了代码的可读性;
eval(`
__webpack_require__.r(__webpack_exports__);
//
var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("test", ./src/test.js");
`);
},
"./src/test.js": function (module, __webpack_exports__, __webpack_require__) {
// ...
},
})
总结:
- 模块机制:
webpack
自己实现了一套模拟模块的机制,将其包裹于业务代码的外部,从而提供了一套模块机制; - 文件编译:
webpack
规定了一套编译规则,通过Loader
和Plugin
,以管道的形式对文件字符串进行处理;
1.4 webpack的打包原理
初始化参数
:从配置文件和Shell
语句中读取与合并参数,得出最终的参数开始编译
:用上一步得到的参数初始化Compiler
对象,加载所有配置的插件,执行对象的run
方法开始执行编译确定入口
:根据配置中的entry
找出所有的入口文件编译模块
:从入口文件出发,调用所有配置的Loader
对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理完成模块编译
:在经过第4
步使用Loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源
:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk
,再把每个Chunk
转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会输出完成
:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
1.5 webpack的打包原理详细
相关问题
webpack
工作流程是怎样的webpack
在不同阶段做了什么事情
webpack 是一种模块打包工具,可以将各类型的资源,例如图片、CSS、JS 等,转译组合为 JS 格式的 bundle
文件
webpack 构建的核心任务是完成内容转化和资源合并。主要包含以下 3 个阶段:
- 初始化阶段
- 初始化参数:从配置文件、配置对象和 Shell 参数中读取并与默认参数进行合并,组合成最终使用的参数
- 创建编译对象:用上一步得到的参数创建
Compiler
对象。 - 初始化编译环境:包括注入内置插件、注册各种模块工厂、初始化
RuleSet
集合、加载配置的插件等
- 构建阶段
- 开始编译:执行
Compiler
对象的run
方法,创建Compilation
对象。 - 确认编译入口:进入
entryOption
阶段,读取配置的Entries
,递归遍历所有的入口文件,调用Compilation.addEntry
将入口文件转换为 Dependency 对象。 - 编译模块(make) : 调用
normalModule
中的build
开启构建,从entry
文件开始,调用loader
对模块进行转译处理,然后调用 JS 解释器(acorn
)将内容转化为AST
对象,然后递归分析依赖,依次处理全部文件。 - 完成模块编译:在上一步处理好所有模块后,得到模块编译产物和依赖关系图
- 生成阶段
- 输出资源(seal) :根据入口和模块之间的依赖关系,组装成多个包含多个模块的
Chunk
,再把每个Chunk
转换成一个Asset
加入到输出列表,这步是可以修改输出内容的最后机会。 - 写入文件系统(emitAssets) :确定好输出内容后,根据配置的
output
将内容写入文件系统
知识点深入
1. webpack 初始化过程
从 webpack 项目 webpack.config.js
文件 webpack 方法出发,可以看到初始化过程如下:
-
将命令行参数和用户的配置文件进行合并
-
调用
getValidateSchema
对配置进行校验 -
调用
createCompiler
创建Compiler
对象- 将用户配置和默认配置进行合并处理
- 实例化
Compiler
- 实例化
NodeEnvironmentPlugin
- 处理用户配置的
plugins
,执行plugin
的apply
方法。 - 触发
environment
和afterEnvironment
上注册的事件。 - 注册
webpack
内部插件。 - 触发
initialize
事件
// lib/webpack.js 122 行 部分代码省略处理
const create = () => {
if (!webpackOptionsSchemaCheck(options)) {
// 校验参数
getValidateSchema()(webpackOptionsSchema, options);
}
// 创建 compiler 对象
compiler = createCompiler(webpackOptions);
};
// lib/webpack.js 57 行
const createCompiler = (rawOptions) => {
// 统一合并处理参数
const options = getNormalizedWebpackOptions(rawOptions);
applyWebpackOptionsBaseDefaults(options);
// 实例化 compiler
const compiler = new Compiler(options.context);
// 把 options 挂载到对象上
compiler.options = options;
// NodeEnvironmentPlugin 是对 fs 模块的封装,用来处理文件输入输出等
new NodeEnvironmentPlugin({
infrastructureLogging: options.infrastructureLogging,
}).apply(compiler);
// 注册用户配置插件
if (Array.isArray(options.plugins)) {
for (const plugin of options.plugins) {
if (typeof plugin === "function") {
plugin.call(compiler, compiler);
} else {
plugin.apply(compiler);
}
}
}
applyWebpackOptionsDefaults(options);
// 触发 environment 和 afterEnvironment 上注册的事件
compiler.hooks.environment.call();
compiler.hooks.afterEnvironment.call();
// 注册 webpack 内置插件
new WebpackOptionsApply().process(options, compiler);
compiler.hooks.initialize.call();
return compiler;
};
2. webpack 构建阶段做了什么
在 webpack 函数执行完之后,就到主要的构建阶段,首先执行 compiler.run()
,然后触发一系列钩子函数,执行 compiler.compile()
-
在实例化
compiler
之后,执行compiler.run()
-
执行
newCompilation
函数,调用createCompilation
初始化Compilation
对象 -
执行
_addEntryItem
将入口文件存入this.entries
(map
对象),遍历this.entries
对象构建chunk
。 -
执行
handleModuleCreation
,开始创建模块实例。 -
执行
moduleFactory.create
创建模块- 执行
factory.hooks.factorize.call
钩子,然后会调用ExternalModuleFactoryPlugin
中注册的钩子,用于配置外部文件的模块加载方式 - 使用
enhanced-resolve
解析模块和loader
的真实绝对路径 - 执行
new NormalModule()
创建module
实例
- 执行
-
执行
addModule
,存储module
-
执行
buildModule
,添加模块到模块队列buildQueue
,开始构建模块, 这里会调用normalModule
中的build
开启构建- 创建
loader
上下文。 - 执行
runLoaders
,通过enhanced-resolve
解析得到的模块和loader
的路径获取函数,执行loader
。 - 生成模块的
hash
- 创建
-
所有依赖都解析完毕后,构建阶段结束
// 构建过程涉及流程比较复杂,代码会做省略
// lib/webpack.js 1284行
// 开启编译流程
compiler.run((err, stats) => {
compiler.close(err2 => {
callback(err || err2, stats);
});
});
// lib/compiler.js 1081行
// 开启编译流程
compile(callback) {
const params = this.newCompilationParams();
// 创建 Compilation 对象
const Compilation = this.newCompilation(params);
}
// lib/Compilation.js 1865行
// 确认入口文件
addEntry() {
this._addEntryItem();
}
// lib/Compilation.js 1834行
// 开始创建模块流程,创建模块实例
addModuleTree() {
this.handleModuleCreation()
}
// lib/Compilation.js 1548行
// 开始创建模块流程,创建模块实例
handleModuleCreation() {
this.factorizeModule()
}
// lib/Compilation.js 1712行
// 添加到创建模块队列,执行创建模块
factorizeModule(options, callback) {
this.factorizeQueue.add(options, callback);
}
// lib/Compilation.js 1834行
// 保存需要构建模块
_addModule(module, callback) {
this.modules.add(module);
}
// lib/Compilation.js 1284行
// 添加模块进模块编译队列,开始编译
buildModule(module, callback) {
this.buildQueue.add(module, callback);
}
3. webpack 生成阶段做了什么
构建阶段围绕
module
展开,生成阶段则围绕chunks
展开。经过构建阶段之后,webpack 得到足够的模块内容与模块关系信息,之后通过Compilation.seal
函数生成最终资源
3.1 生成产物
执行 Compilation.seal
进行产物的封装
-
构建本次编译的
ChunkGraph
对象,执行buildChunkGraph
,这里会将import()
、require.ensure
等方法生成的动态模块添加到chunks
中 -
遍历
Compilation.modules
集合,将module
按entry
/动态引入 的规则分配给不同的Chunk
对象。 -
调用
Compilation.emitAssets
方法将assets
信息记录到Compilation.assets
对象中。 -
执行
hooks.optimizeChunkModules
的钩子,这里开始进行代码生成和封装。- 执行一系列钩子函数(
reviveModules
,moduleId
,optimizeChunkIds
等) - 执行
createModuleHashes
更新模块hash
- 执行
JavascriptGenerator
生成模块代码,这里会遍历modules
,创建构建任务,循环使用JavascriptGenerator
构建代码,这时会将import
等模块引入方式替换为webpack_require
等,并将生成结果存入缓存 - 执行
processRuntimeRequirements
,根据生成的内容所使用到的webpack_require
的函数,添加对应的代码 - 执行
createHash
创建chunk
的hash
- 执行
clearAssets
清除chunk
的files
和auxiliary
,这里缓存的是生成的chunk
的文件名,主要是清除上次构建产生的废弃内容
- 执行一系列钩子函数(
3.2 文件输出
回到 Compiler
的流程中,执行 onCompiled
回调。
- 触发
shouldEmit
钩子函数,这里是最后能优化产物的钩子。 - 遍历
module
集合,根据entry
配置及引入资源的方式,将module
分配到不同的chunk
。 - 遍历
chunk
集合,调用Compilation.emitAsset
方法标记chunk
的输出规则,即转化为assets
集合。 - 写入本地文件,用的是 webpack 函数执行时初始化的文件流工具。
- 执行
done
钩子函数,这里会执行compiler.run()
的回调,再执行compiler.close()
,然后执行持久化存储(前提是使用的filesystem
缓存模式)
1.6 总结
- 初始化参数:从配置文件和
Shell
语句中读取并合并参数,得出最终的配置参数。 - 开始编译:从上一步得到的参数初始化
Compiler
对象,加载所有配置的插件,执行对象的run
方法开始执行编译。 - 确定入口:根scope据配置中的
entry
找出所有的入口文件。 - 编译模块:从入口文件出发,调用所有配置的
loader
对模块进行翻译,再找出该模块依赖的模块,这个步骤是递归执行的,直至所有入口依赖的模块文件都经过本步骤的处理。 - 完成模块编译:经过第
4
步使用loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。 - 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
chunk
,再把每个chunk
转换成一个单独的文件加入到输出列表,这一步是可以修改输出内容的最后机会。 - 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
14 webpack性能优化-构建速度
先分析遇到哪些问题,在配合下面的方法优化,不要上来就回答,让人觉得背面试题
-
优化
babel-loader
缓存 -
IgnorePlugin
忽略某些包,避免引入无用模块(直接不引入,需要在代码中引入)import moment from 'moment'
- 默认会引入所有语言JS代码,代码过大
import moment from 'moment' moment.locale('zh-cn') // 设置语言为中文 // 手动引入中文语言包 import 'moment/locale/zh-cn'
// webpack.prod.js pluins: [ // 忽略 moment 下的 /locale 目录 new webpack.IgnorePlugin(/./locale/, /moment/), ]
-
noParse
避免重复打包(引入但不打包) -
happyPack
多线程打包- JS单线程的,开启多进程打包
- 提高构建速度(特别是多核
CPU
)
// webpack.prod.js const HappyPack = require('happypack') { module: { rules: [ // js { test: /.js$/, // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例 use: ['happypack/loader?id=babel'], include: srcPath, // exclude: /node_modules/ }, ] }, plugins: [ // happyPack 开启多进程打包 new HappyPack({ // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件 id: 'babel', // 如何处理 .js 文件,用法和 Loader 配置中一样 loaders: ['babel-loader?cacheDirectory'] }), ] }
-
parallelUglifyPlugin
多进程压缩JS
-
关于多进程
- 项目较大,打包较慢,开启多进程能提高速度
- 项目较小,打包很快,开启多进程反而会降低速度(进程开销)
- 按需使用
// webpack.prod.js const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') { plugins: [ // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码 new ParallelUglifyPlugin({ // 传递给 UglifyJS 的参数 // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程) uglifyJS: { output: { beautify: false, // 最紧凑的输出 comments: false, // 删除所有的注释 }, compress: { // 删除所有的 `console` 语句,可以兼容ie浏览器 drop_console: true, // 内嵌定义了但是只用到一次的变量 collapse_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值 reduce_vars: true, } } }) ] }
-
-
自动刷新(开发环境)使用
dev-server
即可 -
热更新(开发环境)
-
自动刷新:整个网页全部刷新,速度较慢,状态会丢失
-
热更新:新代码生效,网页不刷新,状态不丢失
// webpack.dev.js const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin'); entry: { // index: path.join(srcPath, 'index.js'), index: [ 'webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server', path.join(srcPath, 'index.js') ], other: path.join(srcPath, 'other.js') }, devServer: { hot: true }, plugins: [ new HotModuleReplacementPlugin() ],
// 代码中index.js // 增加,开启热更新之后的代码逻辑 if (module.hot) { // 注册哪些模块需要热更新 module.hot.accept(['./math'], () => { const sumRes = sum(10, 30) console.log('sumRes in hot', sumRes) }) }
-
-
DllPlugin
动态链接库(dllPlugin
只适用于开发环境,因为生产环境下打包一次就完了,没有必要用于生产环境)-
前端框架如
react
、vue
体积大,构建慢 -
较稳定,不常升级版本,同一个版本只构建一次,不用每次都重新构建
-
webpack
已内置DllPlugin
,不需要安装 -
DllPlugin
打包出dll
文件 -
DllReferencePlugin
引用dll
文件// webpack.common.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { srcPath, distPath } = require('./paths') module.exports = { entry: path.join(srcPath, 'index'), module: { rules: [ { test: /.js$/, use: ['babel-loader'], include: srcPath, exclude: /node_modules/ }, ] }, plugins: [ new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html' }) ] }
// webpack.dev.js const path = require('path') const webpack = require('webpack') const { merge } = require('webpack-merge') const webpackCommonConf = require('./webpack.common.js') const { srcPath, distPath } = require('./paths') // 第一,引入 DllReferencePlugin const DllReferencePlugin = require('webpack/lib/DllReferencePlugin'); module.exports = merge(webpackCommonConf, { mode: 'development', module: { rules: [ { test: /.js$/, use: ['babel-loader'], include: srcPath, exclude: /node_modules/ // 第二,不要再转换 node_modules 的代码 }, ] }, plugins: [ new webpack.DefinePlugin({ // window.ENV = 'production' ENV: JSON.stringify('development') }), // 第三,告诉 Webpack 使用了哪些动态链接库 new DllReferencePlugin({ // 描述 react 动态链接库的文件内容 manifest: require(path.join(distPath, 'react.manifest.json')), }), ], devServer: { port: 8080, progress: true, // 显示打包的进度条 contentBase: distPath, // 根目录 open: true, // 自动打开浏览器 compress: true, // 启动 gzip 压缩 // 设置代理 proxy: { // 将本地 /api/xxx 代理到 localhost:3000/api/xxx '/api': 'http://localhost:3000', // 将本地 /api2/xxx 代理到 localhost:3000/xxx '/api2': { target: 'http://localhost:3000', pathRewrite: { '/api2': '' } } } } })
// webpack.prod.js const path = require('path') const webpack = require('webpack') const webpackCommonConf = require('./webpack.common.js') const { merge } = require('webpack-merge') const { srcPath, distPath } = require('./paths') module.exports = merge(webpackCommonConf, { mode: 'production', output: { filename: 'bundle.[contenthash:8].js', // 打包代码时,加上 hash 戳 path: distPath, // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到 }, plugins: [ new webpack.DefinePlugin({ // window.ENV = 'production' ENV: JSON.stringify('production') }) ] })
// webpack.dll.js const path = require('path') const DllPlugin = require('webpack/lib/DllPlugin') const { srcPath, distPath } = require('./paths') module.exports = { mode: 'development', // JS 执行入口文件 entry: { // 把 React 相关模块的放到一个单独的动态链接库 react: ['react', 'react-dom'] }, output: { // 输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称, // 也就是 entry 中配置的 react 和 polyfill filename: '[name].dll.js', // 输出的文件都放到 dist 目录下 path: distPath, // 存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react // 之所以在前面加上 _dll_ 是为了防止全局变量冲突 library: '_dll_[name]', }, plugins: [ // 接入 DllPlugin new DllPlugin({ // 动态链接库的全局变量名称,需要和 output.library 中保持一致 // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值 // 例如 react.manifest.json 中就有 "name": "_dll_react" name: '_dll_[name]', // 描述动态链接库的 manifest.json 文件输出时的文件名称 path: path.join(distPath, '[name].manifest.json'), }), ], }
"scripts": { "dev": "webpack serve --config build/webpack.dev.js", "dll": "webpack --config build/webpack.dll.js" },
-
优化打包速度完整代码
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
module: {
rules: [
// babel-loader
]
},
plugins: [
// new HtmlWebpackPlugin({
// template: path.join(srcPath, 'index.html'),
// filename: 'index.html'
// })
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index', 'vendor', 'common'] // 要考虑代码分割
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other', 'vendor', 'common'] // 考虑代码分割
})
]
}
// webpack.dev.js
const path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
module.exports = smart(webpackCommonConf, {
mode: 'development',
entry: {
// index: path.join(srcPath, 'index.js'),
index: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/dev-server',
path.join(srcPath, 'index.js')
],
other: path.join(srcPath, 'other.js')
},
module: {
rules: [
{
test: /.js$/,
loader: ['babel-loader?cacheDirectory'],
include: srcPath,
// exclude: /node_modules/
},
// 直接引入图片 url
{
test: /.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
},
// {
// test: /.css$/,
// // loader 的执行顺序是:从后往前
// loader: ['style-loader', 'css-loader']
// },
{
test: /.css$/,
// loader 的执行顺序是:从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /.less$/,
// 增加 'less-loader' ,注意顺序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('development')
}),
new HotModuleReplacementPlugin()
],
devServer: {
port: 8080,
progress: true, // 显示打包的进度条
contentBase: distPath, // 根目录
open: true, // 自动打开浏览器
compress: true, // 启动 gzip 压缩
hot: true,
// 设置代理
proxy: {
// 将本地 /api/xxx 代理到 localhost:3000/api/xxx
'/api': 'http://localhost:3000',
// 将本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2': {
target: 'http://localhost:3000',
pathRewrite: {
'/api2': ''
}
}
}
},
// watch: true, // 开启监听,默认为 false
// watchOptions: {
// ignored: /node_modules/, // 忽略哪些
// // 监听到变化发生后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
// // 默认为 300ms
// aggregateTimeout: 300,
// // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
// // 默认每隔1000毫秒询问一次
// poll: 1000
// }
})
// webpack.prod.js
const path = require('path')
const webpack = require('webpack')
const { smart } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HappyPack = require('happypack')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { srcPath, distPath } = require('./paths')
module.exports = smart(webpackCommonConf, {
mode: 'production',
output: {
// filename: 'bundle.[contentHash:8].js', // 打包代码时,加上 hash 戳
filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
},
module: {
rules: [
// js
{
test: /.js$/,
// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
include: srcPath,
// exclude: /node_modules/
},
// 图片 - 考虑 base64 编码的情况
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 5 * 1024,
// 打包到 img 目录下
outputPath: '/img1/',
// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
// publicPath: 'http://cdn.abc.com'
}
}
},
// 抽离 css
{
test: /.css$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'postcss-loader'
]
},
// 抽离 less
{
test: /.less$/,
loader: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('production')
}),
// 抽离 css 文件
new MiniCssExtractPlugin({
filename: 'css/main.[contentHash:8].css'
}),
// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin(/./locale/, /moment/),
// happyPack 开启多进程打包
new HappyPack({
// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
id: 'babel',
// 如何处理 .js 文件,用法和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory']
}),
// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
// 传递给 UglifyJS 的参数
// (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
uglifyJS: {
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
},
compress: {
// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})
],
optimization: {
// 压缩 css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
// 分割代码块
splitChunks: {
chunks: 'all',
/**
* initial 入口chunk,对于异步导入的文件不处理
async 异步chunk,只对异步导入的文件处理
all 全部chunk
*/
// 缓存分组
cacheGroups: {
// 第三方模块
vendor: {
name: 'vendor', // chunk 名称
priority: 1, // 权限更高,优先抽离,重要!!!
test: /node_modules/,
minSize: 0, // 大小限制
minChunks: 1 // 最少复用过几次
},
// 公共的模块
common: {
name: 'common', // chunk 名称
priority: 0, // 优先级
minSize: 0, // 公共模块的大小限制
minChunks: 2 // 公共模块最少复用过几次
}
}
}
}
})
webpack性能优化-产出代码(线上运行)
前言
- 体积更小
- 合理分包,不重复加载
- 速度更快、内存使用更少
产出代码优化
- 小图片
base64
编码,减少http
请求
// 图片 - 考虑 base64 编码的情况
module: {
rules: [
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 5 * 1024,
// 打包到 img 目录下
outputPath: '/img1/',
// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
// publicPath: 'http://cdn.abc.com'
}
}
},
]
}
-
bundle
加contenthash
,有利于浏览器缓存 -
懒加载
import()
语法,减少首屏加载时间 -
提取公共代码(第三方代码
Vue
、React
、loadash
等)没有必要多次打包,可以提取到vendor
中 -
IgnorePlugin
忽略不需要的包(如moment
多语言),减少打包的代码 -
使用
CDN
加速,减少资源加载时间output: { filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key path: path.join(__dirname, '..', 'dist'), // 修改所有静态文件 url 的前缀(如 cdn 域名) // 这样index.html中引入的js、css、图片等资源都会加上这个前缀 publicPath: 'http://cdn.abc.com' },
-
webpack
使用production
模式,mode: 'production'
-
自动压缩代码
-
启动
Tree Shaking
-
ES6
模块化,import
和export
,webpack
会自动识别,才会生效 -
Commonjs
模块化,require
和module.exports
,webpack
无法识别,不会生效 -
ES6模块和Commonjs模块区别
ES6
模块是静态引入,编译时引入Commonjs
是动态引入,执行时引入- 只有
ES6 Module
才能静态分析,实现Tree Shaking
-
-
-
Scope Hoisting
:是webpack3
引入的一个新特性,它会分析出模块之间的依赖关系,尽可能地把打散的模块合并到一个函数中去,减少代码间的引用,从而减少代码体积- 减少代码体积
- 创建函数作用域更少
- 代码可读性更好
更多推荐
所有评论(0)