- 综合排序
- 最热优先
- 最新优先
- 来自专栏掘金安东尼
webpack4 之 cacheGroups 分包【究极奥义】
(●'◡'●) webpack4 最核心的特性是 【splitChunks】，splitChunks 最核心的配置是 cacheGroups！ 基于这个两个前提，我们再进行下一步。 分析工具 webpack 打包分析有它就够了：webpack-bundle-analyzer 安装 npm install --save-dev webpack-bundle-analyzer 配置：因为 vue-element-admin 基于 vueCli4，所以在 vue.config.js chainWebpack 中设置 config.plugin('BundleAnalyzerPlugin 虽然这不会是最终的结果，但本瓜可以先下一个结论： 配置 cacheGroups，权衡拆包与并包二者，便是 webpack 分包的究极奥义！ 分包不能太细，0KB 至 10 KB 的包是极小的包，应当考虑合并。
1.5K20编辑于 2022-09-22 - 来自专栏Tecvan
Webpack 性能系列四：分包优化
一、什么是分包 默认情况下，Webpack 会将所有代码构建成一个单独的包，这在小型项目通常不会有明显的性能问题，但伴随着项目的推进，包体积逐步增长可能会导致应用的响应耗时越来越长。 为此，Webpack 专门提供了 SplitChunksPlugin 插件，用于实现产物分包。 二、使用 SplitChunksPlugin SplitChunksPlugin 是 Webpack 4 之后引入的分包方案(此前为 CommonsChunkPlugin)，它能够基于一些启发式的规则将 optimization: { splitChunks: { // 设定引用次数超过 4 的模块才进行分包 minChunks: 3 }, }, } 需要注意 ：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略 三、拆分运行时包 在《Webpack 原理系列六：彻底理解 Webpack 运行时》一文中，已经比较深入介绍 Webpack 运行时的概念
5.5K21编辑于 2021-12-09 - 来自专栏【腾讯云开发者】
webpack基础、分包大揭秘
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？ 这个过程需要在webpack初始化的时候预埋下各种插件，经历4个文件，7次跳转才开始进入主题。 （二）SplitChunksPlugin的诞生 针对以上种种问题，webpack4集成了新的插件：SplitChunksPlugin 其中，可以发现SplitChunksPlugin产出的vendor-chunk 4之后引入的分包方案(此前为 CommonsChunkPlugin)，它能够基于一些启发式的规则将Module编排进不同的Chunk序列，并最终将应用代码分门别类打包出多份产物，从而实现分包功能。 /webpack-learning: 配套的PPT 4.前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS-奔跑的瓜牛-博客园 5.Javascript模块化编程（一）：模块的写法-阮一峰的网络日志
1.9K10编辑于 2022-06-16 - 来自专栏Tecvan
有点难的知识点： Webpack Chunk 分包规则详解
默认分包规则 Webpack 4 之后编译过程大致上可以拆解为四个阶段(参考：[万字总结] 一文吃透 Webpack 核心原理)： 在构建(make) 阶段，webpack 从 entry 出发根据模块间的引用关系 Webpack 4 之后，只需要用异步语句 require.ensure("./xx.js") 或 import(". 除了 entry、异步模块外，webpack 5之后还支持基于 runtime 的分包规则。 在 webpack 4 之后则引入了更负责的设计 —— ChunkGroup 专门实现关系链管理，配合 SplitChunksPlugin 能够更高效、智能地实现「启发式分包」，这里的内容很复杂，我打算拆开来在下一篇文章再讲 下节预告 后面我还会继续 focus 在 chunk 相关功能与核心实现原理，内容包括： webpack 4 之后引入 ChunkGroup 的引入解决了什么问题，为什么能极大优化分包功能 webpack
2.1K30编辑于 2021-12-09 - 来自专栏服务器运维笔记
有点难的知识点： Webpack Chunk 分包规则详解
默认分包规则 Webpack 4 之后编译过程大致上可以拆解为四个阶段(参考：[万字总结] 一文吃透 Webpack 核心原理)： ? 到了生成(seal) 阶段，webpack 会根据模块依赖图的内容组织分包 —— Chunk 对象，默认的分包规则有： 同一个 entry 下触达到的模块组织成一个 chunk 异步模块单独组织为一个 Webpack 4 之后，只需要用异步语句 require.ensure("./xx.js") 或 import(". 除了 entry、异步模块外，webpack 5之后还支持基于 runtime 的分包规则。 在 webpack 4 之后则引入了更负责的设计 —— ChunkGroup 专门实现关系链管理，配合 SplitChunksPlugin 能够更高效、智能地实现「启发式分包」，这里的内容很复杂，我打算拆开来在下一篇文章再讲
1.8K20发布于 2021-06-16 - 来自专栏小白维基
webpack 4 入门
文章内容不仅仅是简单的「概念堆叠」，还有一些「重点」概念的「深入理解」，不过篇幅有限我不希望这篇文章变成一份冗长的伪文档，所以全部的内容都是围绕 webpack 的 4个 核心概念延展开来的，每个配置后面我都会尽量跟上一个实例以更加形象的展示配置的具体作用 站在我的角度上，读完这篇文章并不能让你精通 webpack 但是理解 webpack 中的重要概念，自己编写一个 webpack.config.js 配置文件还是可以的。 4. 插件(plugins) 对应属性：plugings 作用说明： 打包优化、资源管理和注入环境变量。 4. 插件(plugins) 插件是 webpack 的支柱功能。webpack 自身也构建于插件系统之上。 插件目的在于解决 loader 无法实现的其他事。 4. 依赖图(dependency graph) 任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有「依赖关系」。
1.1K20编辑于 2022-04-02 - 来自专栏前端Q
Webpack的异步加载原理及分包策略(深度好文，建议收藏)
import() 按需加载 webpack4 官方文档提供了模块按需切割加载，配合 es6 的按需加载 import() 方法，可以做到减少首页包体积，加快首页的请求速度，只有其他模块，只有当需要的时候才会加载对应 分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。 所以我们需要有合理的分包策略。 如果你的 mode 是 production，那么 webpack4 就会自动开启 Code Splitting。 抽离 echart 和 iview 由上面分析可知，echart 和 iview 文件太大，此时我们就用到 webpack4 的 optimization.splitChunks 进行代码分割了，把他们单独抽离打包成文件
5.1K32发布于 2020-12-07 - 来自专栏禅境花园
webpack3 升级 webpack4
据说 webpack3 比 webpack4 编译速度将近快了 60%-80%， 成功升级之后，于是来记录下，项目主要是 vue ^2.5.9 ， webpack ^4.10.2 ， webpack-dev-sever 4 +++ const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3 ----- module.exports 4 +++ - new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 --- ] ... } webpack-dev-server 3 升级 4 之后需要改动的配置 plugins: [ //已经移除 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor /node_modules')) === 0 ) } }), new webpack.optimize.UglifyJsPlugin(...）
83320编辑于 2022-10-25 Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60%
Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60% 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/ invite_code=gbsa5hpojof 背景与目标 目标：在不改变业务功能的前提下，将构建速度提升 60%，同时降低首屏包体与提高二次编译速度 方法：分包策略（splitChunks/runtimeChunk : 'all'：统一管理同步/异步资源，避免重复打包 cacheGroups.vendor/ui/commons：框架与重 UI 库独立分包、公共代码抽取，提升缓存命中率 runtimeChunk: ' 常见坑与修复 过度分包导致请求拥塞：为首屏路由保留合并，后续路由按需 缓存失效频繁：确保 runtimeChunk 与 deterministic id；避免每次构建修改 chunk 内容 SourceMap Webpack 5 的持久化缓存 + 分包 + 并行压缩是提升构建速度与运行时性能的核心组合 通过度量→策略→验证的闭环，构建时间可稳定下降约 60%，同时保持可维护的包结构与良好缓存命中率
36210编辑于 2025-12-15- 来自专栏前端博客
webpack性能优化(1):分隔分包异步加载+组件与路由懒加载
webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？ 如何与webpack配合实现组件懒加载webpack chunk 流webpack配置文件中的output路径配置chunkFilename属性output: { path: resolve(__ ，不推荐——webpack2官网上已经声明将逐渐废除() => system.import(URL)() => import(URL)需要webpack > 2.4，v1不支持——webpack2官网推荐使 ，官方文档webpack中使用import(), 属于es7范畴,require是由webpack社区提供方案，import为es官方提供；如果遇到使用import 报错，需要安装babelrc， 需要配合 a/1190000011519350https://webpack.js.org/guides/code-splitting/转载本站文章《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载
1.8K10编辑于 2023-03-18 - 来自专栏快乐阿超
uniapp分包
——莫言 我们在使用uniapp进行微信小程序开发时可能会遇到如下情况： 这是因为微信小程序官方文档提到： 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作
2K10编辑于 2022-08-17 - 来自专栏程序员IT圈
webpack 4 升级指北
2018年2月25日，刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期，终于发布了正式版，那么抛给广大开发者的问题又来了，我是不是要升级了呢？ 本文就站在一个之前用webpack3开发项目，现在打算升级到4的角度上，来讲一讲需要升级的内容。 安装 首先你要重新安装以下的依赖包： webpack4 webpack-cli（用来启动webpack） html-webpack-plugin还没有更新，会出现 compilation.templatesPluginisnotafunction ，dev-server升级到3，各种loader你们自己看着办，如果是新装的应该是已经支持了的，如果在编译过程中报 cannotfind xxx的错误，说明xxx对应的loader可能需要升级了，因为webpack4 会出现提醒，所以还是加上吧 CommonsChunkPlugin 相信大家如果听说过webpack4的更新，最大的感触应该就是去除了CommonsChunkPlugin，毕竟官方 change log写的篇幅最多的就是这个
1.5K70发布于 2018-03-05 - 来自专栏你的小程序
分包异步化 分包难题不用怕
多业务的分包难以划分 分包体积膨胀 下载并注入无用代码 插件无法实现分包处理 …… 为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。 • • 分包异步化原理 • • 原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。 分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。 分包异步化.png • • 跨分包组件 • • 当使用其他分包组件时，代码包需要增加占位组件 (component placeholder)，实现页面高效配置。 例如页面展示时，分包 (subpackageB) 仍未下载，进行以下操作实现跨分包组件： 1.
1.3K50发布于 2021-09-16 - 来自专栏前端导学
webpack4 入门
/lilugirl/learn-webpack4/tree/master/3 用webpack编译index.js文件生成目录dist和main.js文件 使用CommonJS的模块引入方式打包源码 https ://github.com/lilugirl/learn-webpack4/tree/master/4 常用命令 全局安装webpack npm install webpack webpack-cli webpack会根据配置文件自动找到入口文件 按照配置进行打包 源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/5 如果一个项目下有两个 /avatar.jpg'); console.log(avatar); 执行打包命令 npm run bundle 源码地址 https://github.com/lilugirl/learn-webpack4 'bundle.js', path: path.resolve(__dirname, 'dist') } } 参考代码 https://github.com/lilugirl/learn-webpack4
70030发布于 2019-10-08 - 来自专栏乱码李
webpack4 新特性
目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时 webpack4 升级建议 webpack4 依赖 node 版本 >= 6.11.5，node4 及其以下版本将不再支持。所以首先需要检查 node 是否需要升级。 使用 optimization.splitChunks 进行分包 webpack4 移除 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks webpack4 将会按照以下规则自动进行分包： 新的 chunk 是否被分享或者是否来自 node_modules。 新的 chunk 在压缩和 gzip 前是否大于 30kb。 参考资料 webpack 手摸手，带你用合理的姿势使用 webpack 4 没有了CommonsChunkPlugin，咱拿什么来分包（译） Webpack原理-编写Plugin
1.6K20发布于 2021-11-26 - 来自专栏前端小叙
webpack 4 配置备忘
webpack.dev.js const merge = require('webpack-merge'); const webpack = require("webpack"); const path (), new webpack.NamedModulesPlugin(), ], }); webpack.prod.js const merge = require('webpack-merge /** * Created by MBJ20180827S1 on 2018/10/19. */ const webpack = require("webpack"); const path = (mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(\?.*)? ": "0.0.10", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^4.4.0", "less": "
41730编辑于 2021-12-16 - 来自专栏前端杂货铺-Gopal
webpack3 升级到 webpack4 小记
来提升一下编译打包的速度 注：代码大部分参照网络，可以在后面看到链接 调研 webpack3 升级到 webpack4 的话，还是做了很大的改动，我查询资料总结如下（当然不止以下改动）： ? 解决方法： 在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代，那么这两者有什么区别？ by instanceof Entrypointinstead 解决方法： 这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin，我们可以使用 解决方法： webpack 4 已经废除了 之前 UglifyJsPlugin，用 optimization.minimize 替代 修改前： plugins: [ new webpack.optimize.UglifyJsPlugin /mode/ 解决方法： 这是一个 warnning， webpack 4 一些默认的配置需要通过 mode 配置启用，这个配置项有三个配置值， development、 production 和 none
1.4K20发布于 2020-09-24 - 来自专栏向治洪
android分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.1K100发布于 2018-01-30 - 来自专栏小皮咖
Webpack4 搭建 Vue 项目
前言 由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。 对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。 注：（本文讲述的是webpack4基础配置，文章有点长，请耐心看完。或者直接查看项目源码，或者ctrl + w） 2. /dist') }, }); webpack4 增加了 mode 属性，设置为 development / production,以下是默认配置 development: process.env.NODE_ENV : path.resolve(__dirname, '../') }), ] 分离 CSS webpack4 中使用 mini-css-extract-plugin 插件来分离 css。
1.4K10发布于 2019-11-05 - 来自专栏全栈程序员必看
走近webpack（4）–css相关拓展
我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。 下面，咱们一起来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。 不知道大家还记不记的咱们在处理css文件的时候做过一件事情，也就是把css从js中分离出来，因为webpack打包是把css打包进js的，所以我们修改一下loader的配置方式，跟前面的css是一样的， 所以我们可以使用一个插件，在打包的时候自动去除未使用的css样式： /*PurifyCSS-webpack要依赖于purify-css这个包，所以这两个都安装一下，-D是--save-dev的简写，i是 install的简写*/ npm i -D purifycss-webpack purify-css 然后我们引入glod和purifycss-webpack插件： const glob = require
74510编辑于 2022-07-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号