webpack相关

webpack.docschina.org_ (2).png

在 webpack < 4 的版本中，通常将 vendor 作为一个单独的入口起点添加到 entry 选项中，以将其编译为一个单独的文件（与 CommonsChunkPlugin 结合使用）。而在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks 选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。不要 为 vendor 或其他不是执行起点创建 entry。

Loader

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。

module.exports = {module: {rules: [{test: /.css$/,use: [{ loader: 'style-loader' },{loader: 'css-loader',options: {modules: true,},},{ loader: 'sass-loader' },],},],},
};

Q：sideEffects在webpack打包的时候有什么用？

在Webpack中，sideEffects是一个用于标记模块是否有副作用（side effect）的配置选项。副作用是指模块在导入时对全局状态进行修改或对环境造成其他影响，例如修改文件系统、发起网络请求等。对于没有副作用的模块，Webpack可以利用这个信息进行Tree Shaking（摇树优化），将未被使用的代码从最终的打包文件中删除，以减小打包文件的体积。

sideEffects的值可以是一个布尔值或一个数组。如果值为false，表示该模块没有副作用，可以进行Tree Shaking优化；如果值为true或者数组中包含"*"，表示该模块具有副作用，不可进行Tree Shaking优化；如果值为一个数组，数组中包含的字符串表示该模块具有副作用的文件路径或通配符。

例如，如果你的项目中有一个模块app.js，它没有副作用，那么可以在它的代码中添加如下注释：

/*#__PURE__*/ // 声明该模块没有副作用
export function add(x, y) {return x + y;
}

然后在Webpack的配置文件中添加以下配置：

module.exports = {// ...module: {rules: [{test: /.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]},optimization: {usedExports: true},// ...// 声明哪些模块没有副作用sideEffects: ["./src/add.js"]
}

这样，在打包时，Webpack会根据sideEffects的配置信息，将没有副作用的模块进行Tree Shaking优化，提高打包性能和减小打包体积。

Q：css或者less文件可以被tree-shaking吗？

在Webpack中，对于纯CSS或Less文件（即没有包含JavaScript代码），无法进行Tree Shaking优化，因为它们不会产生导出的JavaScript代码。Tree Shaking优化是通过检测导出的JavaScript代码的使用情况来删除未使用的代码，因此只有包含导出的JavaScript代码的模块才能进行Tree Shaking优化。

但是，如果你在Less或CSS中使用了类似于PostCSS、Autoprefixer等预处理器，它们可能会将部分JavaScript代码添加到生成的CSS文件中，例如添加浏览器前缀或者自动转换代码。在这种情况下，生成的CSS文件包含了导出的JavaScript代码，因此可以进行Tree Shaking优化。

要使Webpack可以对包含JavaScript代码的CSS或Less文件进行Tree Shaking优化，可以使用mini-css-extract-plugin插件，将CSS或Less文件单独打包成一个JavaScript模块，然后再进行Tree Shaking优化。

例如，在Webpack配置文件中添加以下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {// ...module: {rules: [{test: /.less$/,use: [MiniCssExtractPlugin.loader,"css-loader","less-loader",{loader: "postcss-loader",options: {plugins: [require("autoprefixer")()]}}]}]},plugins: [new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"})],optimization: {usedExports: true}
}

这样，Webpack会将Less文件单独打包成一个JavaScript模块，然后在Tree Shaking优化时检测它的导出代码是否被使用，以删除未使用的代码。

Q：基于上述的描述，那么未被引用到的less或者css文件也就会被自动删除掉吗？

未被引用的CSS或Less文件并不会自动被Webpack删除，因为它们虽然未被引用，但是它们仍然被包含在Webpack的打包文件中，因此仍然会增加打包文件的体积。

如果需要将未使用的CSS或Less文件从打包文件中删除，可以使用插件或者手动处理。

例如，可以使用purgecss-webpack-plugin插件，在打包后对未使用的CSS文件进行删除。这个插件会分析打包后的HTML和JavaScript代码，检测哪些CSS样式类未被使用，然后将其从CSS文件中删除。

安装purgecss-webpack-plugin：

npm install -D purgecss-webpack-plugin

在Webpack配置文件中添加以下配置：

const PurgeCssWebpackPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');module.exports = {// ...plugins: [new PurgeCssWebpackPlugin({paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`,  { nodir: true }),// whitelist patternswhitelistPatterns: [/^a-/, /^is-/, /^has-/, /^router-link-active$/]})]
}

这样，purgecss-webpack-plugin就会在打包后检测未使用的CSS样式类，并将其从CSS文件中删除。

需要注意的是，purgecss-webpack-plugin只能处理在HTML和JavaScript代码中使用的CSS样式类，无法处理在CSS文件中定义但未使用的样式类。因此，在使用该插件前需要仔细检查CSS文件，确保所有的样式类都被使用。

Q：webpack4相比于webpack3，升级了哪些地方?

1.性能优化：Webpack 4具有更好的性能和更快的构建速度。新的版本使用了更好的算法和数据结构，以减少构建时间。此外，Webpack 4还通过将模块ID生成算法从数字更改为基于字符串的算法，实现了更好的缓存和更小的包大小。

2.模块优化：Webpack 4优化了模块系统，允许开发者使用ES6模块，并且默认启用Tree Shaking，可以消除未使用的代码，减少包的大小。

3.Mode选项：Webpack 4新增了mode选项，可以配置为“development”、“production”和“none”三种模式，每种模式都有不同的默认配置和插件，便于开发者进行不同环境的构建和优化。

4.新的插件：Webpack 4提供了许多新的插件和特性，如OptimizeCSSAssetsPlugin、SplitChunksPlugin、NoEmitOnErrorsPlugin等。

5.更好的文档：Webpack 4的文档进行了改进，更加清晰明了，方便开发者使用。

Q：SplitChunksPlugin比CommonsChunkPlugin优点在哪儿？

SplitChunksPlugin是Webpack 4中用于代码分割的新插件，与Webpack 3中的CommonsChunkPlugin相比，SplitChunksPlugin有以下几个优点：

  1. 更好的默认配置：SplitChunksPlugin提供了更好的默认配置，可以更好地适应不同的项目需求，而CommonsChunkPlugin需要手动配置选项。

  2. 更灵活的配置选项：SplitChunksPlugin提供了更灵活的配置选项，可以根据实际需求进行定制化设置，例如可以基于模块的大小、被引用的次数等进行分割。

  3. 更好的性能：SplitChunksPlugin相比CommonsChunkPlugin具有更好的性能，可以更有效地将代码分割为更小的块，并实现更好的缓存机制。

  4. 更好的Tree Shaking特性：SplitChunksPlugin可以更好地支持Tree Shaking特性，可以更有效地消除未使用的代码，从而减少打包的体积。

总的来说，SplitChunksPlugin在功能和性能上都比CommonsChunkPlugin更优秀，可以更好地满足现代前端项目的需求。但是，如果您正在使用Webpack 3，CommonsChunkPlugin仍然是可用的，并且可以实现代码分割的功能。

CommonsChunkPlugin是Webpack中用于提取公共代码的插件，它的作用是将多个入口文件中相同的代码提取到一个单独的文件中，以便在多个页面之间共享使用，避免代码重复和增加页面加载时间。以下是CommonsChunkPlugin的常用配置选项：

  • name：表示提取出的公共模块的名称，可以使用字符串或者函数来指定名称。

  • filename：表示生成的文件名，可以使用[hash]等占位符。

  • minChunks：表示在多少个模块中使用的模块才会被提取为公共模块，默认值是2，也可以使用函数来指定。

  • chunks：表示在哪些入口chunk中使用的模块才会被提取为公共模块，可以是一个字符串或字符串数组，也可以是一个函数。

  • children：表示是否在所有的chunk中查找公共模块，默认值是false。

  • async：表示将异步加载的模块中公共部分提取到单独的文件中。

Q:webpack5相比于webpack4做了哪些升级？

Webpack 5 相比于 Webpack 4 做了很多升级，以下是一些主要的升级点：

  1. 更快的构建速度：Webpack 5 使用了一些新的技术，如持久化缓存和更好的多线程处理，从而提高了构建速度和性能。

  2. 更好的 Tree Shaking：Webpack 5 在 Tree Shaking 算法上进行了优化，可以更准确地识别和剔除没有使用的代码。

  3. 更好的模块解析：Webpack 5 对模块解析进行了升级，支持更多的模块类型和模块路径解析方式，例如支持 type: module，从而使得 ES Modules 能够更好地工作。

  4. 更好的代码块拆分：Webpack 5 对代码块拆分进行了升级，支持动态导入的模块和代码块，可以更好地控制代码块的大小和数量。

  5. 更好的输出管理：Webpack 5 对输出管理进行了升级，支持更多的输出选项和格式，例如支持输出 ESM 格式的代码。

  6. 更好的错误处理：Webpack 5 对错误处理进行了升级，可以提供更详细和有用的错误信息和提示。

  7. 更好的插件系统：Webpack 5 对插件系统进行了升级，支持更多的插件选项和钩子，例如支持 beforeRun 和 afterEmit 两个新的钩子。

  8. 更好的缓存管理：Webpack 5 对缓存管理进行了升级，支持更多的缓存选项和控制方式，例如支持自定义缓存目录和缓存方式。

除了以上几点之外，Webpack 5 还有很多其他的升级和改进，可以去官方文档查看详细信息。总的来说，Webpack 5 对 Webpack 4 进行了全面的升级和改进，提高了构建速度、代码质量和开发体验。

Q：webpack为什么对于Import()的模块会单独创建一个或者多个异步块？

Webpack对import()的模块单独创建异步块的目的是实现代码分割（code splitting）和按需加载（on-demand loading）的优化策略。

代码分割是一种将代码拆分成较小块的技术，它可以使应用程序在加载时只请求所需的代码块，而不是一次性加载所有代码。这样可以减少初始加载时间，并提高应用程序的性能。通过将import()的模块单独创建异步块，Webpack能够将这些模块的代码与主应用程序的代码分离，使得在初始加载时只加载必要的代码，延迟加载其他模块。

异步块的创建还使得按需加载成为可能。当应用程序需要某个模块时，可以通过动态导入（import()）该模块来触发异步请求，从而按需加载该模块的代码。这种按需加载的方式可以根据用户操作、路由变化或其他条件来决定何时加载特定模块，以优化应用程序的性能和资源利用。

另外，通过将import()的模块单独创建异步块，Webpack还能够利用浏览器的并行加载能力。当浏览器发起异步请求时，它可以同时请求多个文件，从而加快加载速度。

总之，通过将import()的模块单独创建异步块，Webpack实现了代码分割和按需加载的优化策略，以提高应用程序的性能和加载速度。它允许开发人员根据需要延迟加载模块，减少初始加载的大小，并充分利用浏览器的并行加载能力。

Q：为什么有的模块没有被使用，但是也没有tree-shaking掉？

如果一个模块没有显示的声明sideEffects，也没用添加/#PURE/这样的声明。那么就要依赖Terser来进行推断副作用了。但是在现实场景下，这是一件很困难的事情。贴一下webpack官方文档里的一个demo：

import { Button } from '@shopify/polaris';import hoistStatics from 'hoist-non-react-statics';function Button(_ref) {// ...
}function merge() {var _final = {};for (var _len = arguments.length, objs = new Array(_len), _key = 0;_key < _len;_key++) {objs[_key] = arguments[_key];}for (var _i = 0, _objs = objs; _i < _objs.length; _i++) {var obj = _objs[_i];mergeRecursively(_final, obj);}return _final;
}function withAppProvider() {return function addProvider(WrappedComponent) {var WithProvider =/*#__PURE__*/(function (_React$Component) {// ...return WithProvider;})(Component);WithProvider.contextTypes = WrappedComponent.contextTypes? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes): polarisAppProviderContextTypes;var FinalComponent = hoistStatics(WithProvider, WrappedComponent);return FinalComponent;};
}var Button$1 = withAppProvider()(Button);export {// ...,Button$1,
};

When Button is unused you can effectively remove the export { Button$1 }; which leaves all the remaining code. So the question is “Does this code have any side effects or can it be safely removed?”. Difficult to say, especially because of this line withAppProvider()(Button). withAppProvider is called and the return value is also called. Are there any side effects when calling merge or hoistStatics? Are there side effects when assigning WithProvider.contextTypes (Setter?) or when reading WrappedComponent.contextTypes (Getter?).

Terser actually tries to figure it out, but it doesn’t know for sure in many cases. This doesn’t mean that terser is not doing its job well because it can’t figure it out. It’s too difficult to determine it reliably in a dynamic language like JavaScript.

reference: https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/22111.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vim使用tips ---用鼠标定位代码

Vim使用tips ---用鼠标定位代码

在vim界面里我们想用鼠标操作定位代码是不可以的&#xff01;&#xff01; 但是我们可以更改设置&#xff1a; 按下 Esc 键返回到普通模式shift&#xff1a; 输人命令 set mouse a回车 这时候我们就可以定位到代码啦&#xff01;&#xff01; 还可以批量选中复制和删除&…
阅读更多...
【Docker】Docker高级网络(NetWork)

【Docker】Docker高级网络(NetWork)

【Docker】Docker高级网络(NetWork) 文章目录 【Docker】Docker高级网络(NetWork)1. 概述2. 网络2.1 网桥类型2.2 创建网络自定义桥2.3 查看所有网络2.4 查看特定网络的细节2.5 删除特定网络2.6 多个容器使用指定网络 参考文档&#xff1a;高级网络配置 Docker – 从入门到实践…
阅读更多...
[论文分享]MR-MAE：重构前的模拟：用特征模拟增强屏蔽自动编码器

[论文分享]MR-MAE：重构前的模拟：用特征模拟增强屏蔽自动编码器

论文题目&#xff1a;Mimic before Reconstruct: Enhancing Masked Autoencoders with Feature Mimicking 论文地址&#xff1a;https://arxiv.org/abs/2303.05475 代码地址&#xff1a;https://github.com/Alpha-VL/ConvMAE&#xff08;好像并未更新为MR-MAE模型&#xff09; …
阅读更多...
nginx部署vue项目

nginx部署vue项目

nginx部署vue项目 一. vue配置讲解二. Nginx配置讲解三. vue项目部署到nginx 一. vue配置讲解 在vue.config.js文件中&#xff0c;module.exports是配置路由转发的&#xff0c;几个重要的属性讲解 ① publicPath publicPath: /ulane/, 此属性配置上&#xff0c;如果访问的路…
阅读更多...
耳夹式骨传导耳机哪个牌子好？耳夹骨传导耳机盘点！

耳夹式骨传导耳机哪个牌子好？耳夹骨传导耳机盘点！

随着科技的日新月异&#xff0c;耳夹式骨传导耳机也在不断更新换代。市场上涌现出许多品牌&#xff0c;这使得消费者在购买时感到困惑。别担心&#xff01;我们为你整理了一些市场上口碑和销量优秀的品牌和耳夹式骨传导耳机产品&#xff0c;希望能帮到你。 一&#xff1a;南卡…
阅读更多...
苹果iOS App Store上架操作流程详解：从开发者账号到应用发布

苹果iOS App Store上架操作流程详解：从开发者账号到应用发布

很多开发者在开发完iOS APP、进行内测后&#xff0c;下一步就面临上架App Store&#xff0c;不过也有很多同学对APP上架App Store的流程不太了解&#xff0c;下面我们来说一下iOS APP上架App Store的具体流程&#xff0c;如有未涉及到的部分&#xff0c;大家可以及时咨询&#…
阅读更多...
​python接口自动化（二十八）--html测试 报告——下（详解） ​

​python接口自动化（二十八）--html测试 报告——下（详解） ​

简介 五一小长假已经结束了&#xff0c;想必大家都吃饱喝足玩好了&#xff0c;那就继续学习吧。一天不学习&#xff0c;自己知道&#xff1b;两天不学习&#xff0c;对手知道&#xff1b;三天不学习&#xff0c;大家知道&#xff1b;一周不学习&#xff0c;智商输给猪。好了开个…
阅读更多...
【架构设计】高并发架构实战：从需求分析到系统设计

【架构设计】高并发架构实战：从需求分析到系统设计

写在前面 很多软件工程师的职业规划是成为架构师&#xff0c;但是要成为架构师很多时候要求先有架构设计经验&#xff0c;而不做架构师又怎么会有架构设计经验呢&#xff1f;那么要如何获得架构设计经验呢&#xff1f; 1 高并发是什么 高并发是指系统在同一时间内处理的请求量…
阅读更多...
js判断两个数组是增加还是删除

js判断两个数组是增加还是删除

JS判断两个数组的数据&#xff0c;增加的数据以及删除的数据。 // 第一个参数是新数组&#xff0c;第二个参数是旧数 const compareArrays function(arr1, arr2 ) {let remove []let add []// 旧数据循环for (let i 0; i < arr2.length; i) {let item arr2[i];if (arr…
阅读更多...
数字 IC 设计职位经典笔/面试题（二）

数字 IC 设计职位经典笔/面试题（二）

共100道经典笔试、面试题目&#xff08;文末可全领&#xff09; FPGA 中可以综合实现为 RAM/ROM/CAM 的三种资源及其注意事项&#xff1f; 三种资源&#xff1a;BLOCK RAM&#xff0c;触发器&#xff08;FF&#xff09;&#xff0c;查找表&#xff08;LUT&#xff09;&#xf…
阅读更多...
SQLSERVER 居然也能调 C# 代码 ?

SQLSERVER 居然也能调 C# 代码 ?

一&#xff1a;背景 1. 讲故事 前些天看到一个奇怪的 Function 函数&#xff0c;调用的是 C# 链接库中的一个 UserLogin 方法&#xff0c;参考代码如下&#xff1a; CREATE FUNCTION dbo.clr_UserLogin (name AS NVARCHAR(100),password AS NVARCHAR(100) ) RETURNS INT A…
阅读更多...
命令行系列：windows cmd官方文档

命令行系列：windows cmd官方文档

官方文档 和java开发、Android开发一样。cmd也有官方文档&#xff1a; https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands 如下图&#xff0c;我们可以看到经典的cd,clean命令。 cd命令的全程是什么&#xff1f; cd命令…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023