皮皮网

1.webpack3和4的区别
2.webpack的码讲chunk生成逻辑
3.前端资讯Webpack 4 将移除 CommonsChunkPlugin
4.webpack4 之 splitChunks.name
5.webpack升级指南
6.聊聊 Webpack4 的 Tree Shaking

webpack3和4的区别

       webpack4引入了零配置的概念（实际配置下来还是要写不少配置）,官方宣传能够提升构建速度%-%，听起来让人非常心动，那么接下来看看有哪些大的变化:

        相当于如下配置：

        optimization.runtimeChunk = 'single' 时效果等同于下面：

        optimization.runtimeChunk = true | 'multiple' 时效果等同于下面：

        本人使用的配置：

        插件：

        optimize-css-assets-webpack-plugin : CSS压缩，传入 optimization.minimizer 选项， 覆盖webpack默认提供的,但是webapck默认就有CSS压缩功能，不需要配置这个

        mini-css-extract-plugin : 将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap ，vue-cli配置选项 css.extract=true 用的就是这个插件

webpack的chunk生成逻辑

       Webpack的chunk生成机制是在优化前端资源加载性能时的重要手段。在webpack@4环境中，码讲通过optimization.splitChunks配置实现模块拆分和按需加载。码讲这个配置涉及SplitChunksPlugins插件，码讲其默认行为是码讲async，但可以调整为initial以优化bundle加载。码讲conti源码泄露

       在splitChunks配置中，码讲你可以指定chunk的码讲生成策略，如all、码讲async、码讲initial或自定义函数。码讲将它改为initial后，码讲bundle会被视为立即加载的码讲chunk进行优化，可能会生成名为vendors~xxx.js的码讲文件，其中包含node_modules中的码讲模块。

       minSize和maxSize配置控制新生成chunk的文件大小，只有当尺寸在限制范围内，chunk才会被创建。cacheGroups则是关键，它定义了module如何合并成chunk，包括测试规则（test）、优先级、chunk名称生成规则（name）等。同事找我要源码例如，test可以匹配特定路径，如node_modules，将相关模块放入vendors chunk。

       minChunks规则决定当一个chunk引用的module数量达到阈值时，才会生成新的chunk。splitChunks的配置会在cacheGroup中应用，理解这些设置有助于你更有效地管理模块拆分。

       总的来说，理解这些配置有助于你精细化管理webpack的chunk生成，从而提升网站的加载速度和用户体验。通过调整和优化这些参数，你可以更好地控制资源加载，实现前端性能的优化。

前端资讯Webpack 4 将移除 CommonsChunkPlugin

       前端开发者们注意了，来自 FEPulse 公众号（微信搜索FEPulse，获取每日前端动态）的消息：webpack 4 的更新将带来重大变革，即将移除 CommonsChunkPlugin。取而代之的是两个新配置项——optimization.splitChunks 和 optimization.runtimeChunk。

       CommonsChunkPlugin 曾经是webpack中用于代码分割和性能优化的重要工具，它允许开发者将不常变动的库或公共模块打包到单独的chunk中，以提升应用的量价之王源码加载速度。举个例子，通过配置 CommonsChunkPlugin，可以将react、redux等库与业务代码分离，或为不同入口共享的模块进行打包。

       然而，webpack 4将采用新的策略。默认情况下，可以使用optimization.splitChunks的'all'模式启动代码分割，webpack会自动根据预设条件打包chunks。开发者可以根据需求调整配置，定制代码分割策略。同时，optimization.runtimeChunk被用来为每个入口添加一个仅包含runtime部分的chunk，这在保持模块独立的同时，优化了运行时的性能。

       总之，webpack 4的这些变化无疑将简化前端开发者的配置过程，提高项目的构建效率。为了获取更多关于webpack 4的最新资讯，记得关注我们的公众号FEPulse，确保第一时间掌握前端技术的挖币网源码最新动态。

webpack4 之 splitChunks.name

       webpack4中的splitChunks.name配置详解

       splitChunks.name 是webpack4中的一个重要配置，用于控制拆分bundle的命名策略。配置选项有三种：布尔值、函数或字符串。具体说明如下：

       布尔值（默认true）：当为true时，会根据chunks和缓存组名称自动生成chunk名称。

       函数：可以提供一个函数（如 function(module, chunks, cacheGroupKey) => string），允许用户自定义chunk的名称。如果函数返回静态字符串，所有单独拆分的chunk将合并到一个文件，可能导致初次加载慢和下载文件增大。

       字符串：静态字符串指定名称，如果与入口点名称匹配，入口点会被移除。建议生产环境设置为false，以避免不必要的命名更改。

       接下来，通过几个实例演示splitChunks.name的不同配置效果：

       默认值：默认情况下，拆分后的chunk会根据配置生成名称。

       静态字符串：设置为固定字符串后，原本分开的entry1和entry2被合并到同一bundle中。

       函数：函数返回'bundle'时，试玩平台源码修改效果与静态字符串相同，拆分chunk合并到一个文件。

       匹配入口点：设置为入口点名'entry1'，则entry1被移除，其他chunk合并。

       生产环境：mode设为production，splitChunks.name设为false，名称基于chunk而非初始配置。

       按需加载：在initial模式下，按需引入的module不受此配置影响。

       async和all模式：async模式下无影响，all模式下按需引入的module也参与命名。

       总结来说，splitChunks.name是灵活的命名策略，根据场景选择合适的配置可以优化打包效果。最后，任何疑问或建议，欢迎在知乎、CSDN或GitHub上与我交流，一起探讨和学习webpack的使用技巧。感谢阅读！

webpack升级指南

       前端构建工具的主流选择，webpack4升级详解

       webpack4的升级带来了显著的变化，目标在于简化开发流程，降低入门门槛。本文将逐步解析从低版本到4版本的主要更新内容。

       新特性概览

       入口（entry）：默认自动检测，无需手动指定，支持多入口配置。

       出口（output）：默认设置有改动，filename、path和publicPath属性更加直观易用。

       Loader：test和use属性更清晰地定义文件处理规则。

       插件（plugins）：范围扩大，内置优化按模式自动配置。

       模式（mode）：新增功能，简化环境配置，提供production、development和none三种模式。

       注意事项

       升级必备：确保安装最新webpack、webpack-cli和webpack-dev-server。

       mode不可忽视，否则会产生警告。

       html-webpack-plugin钩子调整，需更新并使用最新插件版本以避免错误。

       ExtractTextWebpackPlugin的替代方案：推荐使用mini-css-extract-plugin。

       vue项目中，需注意vue-style-loader与mini-css-extract-plugin的兼容性。

       CommonsChunkPlugin已被放弃，转向optimization模块。

       总结与建议

       升级webpack4虽然减少了繁琐配置，但可能需要适应。在本地开发，parcel的零配置可能更便捷，但生产环境推荐使用webpack，以适应特定项目需求。有问题欢迎交流。

聊聊 Webpack4 的 Tree Shaking

       Webpack4 的 Tree Shaking 是一种代码优化策略，旨在通过静态分析 ES6 模块来消除无用的 JavaScript 代码，以减少文件体积，提高加载速度。其主要依赖 ES6 的 import 和 export 功能进行代码的静态分析，识别并消除未被使用的代码、未被引用的方法或只写不读的变量。

       然而，Tree Shaking 在实际应用中并不总能完美发挥作用。例如，使用 antd、lodash 这类库时，Tree Shaking 通常无效，需要借助插件来实现按需加载。随着 Webpack 更加注重约定优于配置的原则，许多优化配置，包括 Tree Shaking，被 mode 属性取代。

       在进行打包时，Tree Shaking 会失效在几种特定情况下。其中，export default 的使用是导致 Tree Shaking 失败的常见原因，因为这会导致模块以对象的形式打包，无法进行深入的静态分析。此外，函数存在副作用，如修改全局变量或修改外部变量，也会导致 Tree Shaking 无法识别并删除这些代码。

       Webpack 打包类库时，由于浏览器不支持 import 和 export，因此无法直接进行 Tree Shaking。为了避免类库打包后的 Tree Shaking 失效，推荐将类库分解为多个单独的文件，每个文件包含一个特定的函数或模块，然后在引用时仅引入需要的函数。这样可以利用 Webpack 的优化功能，如 sideEffects 和 providedExports 配置，来控制哪些代码会被删除。

       而使用 Rollup 打包类库，可以配置 output.format 为 es，生成符合 ES6 模块标准的代码，从而实现 Tree Shaking。尽管如此，Babel 在转换 ES6 代码时可能会引入副作用，导致 Tree Shaking 失效。解决这一问题的方法是在相关代码前添加 /*@PURE*/ 注释，表明该函数或方法没有副作用，便于 Tree Shaking 正确识别并删除无用代码。

       Webpack4 通过 mode 参数自动激活了一系列优化选项，包括 Tree Shaking，从而简化了配置过程。优化选项如 optimization.providedExports、optimization.usedExports、optimization.concatenateModules 等，以及 TerserPlugin 插件，共同作用于代码压缩和冗余代码删除，实现代码优化。配置 sideEffects 为 false 可以将所有未使用的模块视为纯函数，避免因副作用而导致的代码保留。

       总结而言，Webpack4 的 Tree Shaking 是一个强大的代码优化工具，能显著减少项目文件体积，提高性能。然而，在实际应用中，需要考虑特定的场景和限制，如类库的打包、Babel 转码副作用等，以充分利用 Tree Shaking 的优势。正确配置 Webpack 的相关选项，结合其他优化策略，可以更有效地实现代码优化，提升应用性能。