在上一篇《Webpack 性能系列一: 使用 Cache 提升构建性能》中，我们讨论了 Webpack 语境下如何应用各种缓存措施提升构建性能，接下来我们继续聊聊 Webpack 中一些行之有效的并行计算方案。缓存的本质是首轮计算后将结果保存下来，下次直接复用计算结果而跳过计算过程；并行的本质则是在同一时间内并发执行多个运算，提升单位时间计算效率，两者都是计算机科学常见的提升性能优化手段。
影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。
https://webpack.js.org/configuration/cache/
针对与webpack项目打包，我们正常做的最多的就是脚手架安装，后run build直接部署，不会去做过多的处理。
前端项目随着时间推移和业务发展，页面可能会越来越多，或者功能和业务代码会越来越多，又或者依赖的外部类库会越来越多，这个时候原本不足为道的 webpack 构建时间消耗就会慢慢地进入我们的视野。
webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。
把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
webpack需要处理的文件是非常多的，构建过程是一个涉及大量文件读写的过程。项目复杂起来了，文件数量变多之后，webpack构建就会特别满，而且运行在nodeJS上的webpack是单线程模型的，也就是说Webpack一个时刻只能处理一个任务，不能同时处理多个任务。
最近发现项目(基于Vue2)构建比较慢， 一次上线发布需要 15 分钟， 效率低下。
随着项目越来越大，编译的耗时也在默默地不断增加。无论是开发阶段还是生产集成，编译耗时都成为了一个不容小觑的痛点。
5.执行npm run build，发现那些被拆分的包，没有打进业务代码中，符合预期
在大家的日常开发中，特别是开发大型项目，大家有没有每次打包想要骂娘的冲动！反正我是很痛苦，每次打包20分钟起，这漫长的等待时间，让人非常焦虑，遇见一些特殊问题（比如测试微信分享），必须要打包部署，看效果，你会发现，一天时间全部浪费在打包上，真所谓改代码两分钟，打包代码两小时，于是闲暇之余，研究了一下webpck打包机制，并且通过几个小插件和一些技巧成功的减少公司项目的打包时间，虽然打包时间没有断崖式的减少，但是能少一分钟，是一分钟吧，下面我们一起来研究一下webpack的性能优化，以及体积优化！
及时删除无用的模块，不要引入无用的文件，使用 treeshaking 尽量减少包体。也可以利用 splitchunks 将包文件切割，有效率利用缓存。
本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。
Webpack 是一个模块打包器，可以将多个模块打包成一个或多个文件。除了基本的打包功能外，Webpack 还提供了很多高级功能，可以优化打包结果、提高构建速度等。在本文中，我们将介绍 Webpack 的一些进阶使用技巧，并提供相应的代码示例。
当项目越来越复杂时，会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事，下面我们就从速度和体积两方面来探讨构建优化的策略。
本文使用「署名 4.0 国际 (CC BY 4.0)」 许可协议，欢迎转载、或重新修改使用，但需要注明来源。
作者：chriscai，腾讯 WXG 前端开发工程师 企业微信 web 项目从以前的小而简单的 web 项目，历经五载，蜕变成了平台级的项目。这几年伴随着前端工业化和前端技术变革，本文将介绍我们如何在高速迭代当中，对大型 web 项目进行高效代码管理，架构升级，编译优化等，最后完成工程化的工业级蜕变。 一、背景介绍 企业微信 企业微信是为用户提供企业 IT 管理的产品。目前有两大业务体系：“连接微信”和“效率与办公”。企业微信具体业务涉及非常广泛，主要有几大功能：客户联系、家校沟通、日程、OA、会议等
可选值：async(默认) | initial | all(推荐)，针对下面的 a.js 和 b.js
Vue.js CLI工具 不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。
在使用 Webpack 时，如果不注意性能优化，可能会产生性能问题，会导致在开发体验上不是非常丝滑，性能问题主要是编译速度慢，打包体积过大，因此性能优化也主要从这些方面来分析。本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。
Vue-Cli脚手架会有webpack的很多默认行为，因此我们得知道基于Vue-Cli的项目，当前的webpack都配置了啥，然后才能做针对性的分析与优化。
@vue/cli ^3.3.0 module.exports = { //部署应用的基本url 可用 process.env.NODE_ENV 环境变量控制 publicPath: '/', //指定生产环境目录 outputDir: 'dist', //指定生成静态资源的生成目录 assetsDir: 'static', //指定生成的index.html的输出名 indexPath:'index.html', //生成静态资源文件名包含hash以更好的控制缓存
新建文件.png 如上图，根目录下新建vue.config.js文件 代码如下。 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler // https://vuejs.org
开发环境优化 HMR 模块热替换 devServer设置hot: true style-loader 已实现 webpack.HotModuleReplacementPlugin source map 建立源码与构建代码之间的映射关系，快速定位错误在源码中的位置 生产环境优化（构建时优化 & 运行时优化） 缓存策略 配置babel-loader时，设置cacheDiretory为true，开启babel缓存，之后webpack在打包时，只会对修改过的模块重新编译，其他模块读取babe
Webpack 是一款强大的模块打包工具，广泛应用于现代前端开发中。本文将从以下几个方面讨论 Webpack 的高阶使用方法：
我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。
const TerserPlugin = require('terser-webpack-plugin');
「副作用」的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个export或多个export。举例说明，例如polyfill，它影响全局作用域，并且通常不提供export。 注意，任何导入的文件都会受到tree shaking的影响。这意味着，如果在项目中使用类似css-loader并导入CSS文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue --version，看看是否打印出当前安装的vue-cli版本号，来验证它是否安装成功。
我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。
axios.defaults.baseURL=”localhost:9011″ //全局变量根路径
高级也就是相对于基础的优化。从以下角度进行优化： 提升开发体验； 提升打包构建速度 减少代码体积 优化代码运行性能
之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用Webpack来配置项目。
在此对webpack的性能优化进行几点声明： 在部分极度复杂的环境下，需要双package.json文件，即实行三次打包 在代码分割时，低于18K的文件没必要单独打包成一个chunk,http请求次数过多反而影响性能 prerender和PWA互斥，这个问题暂时没有解决 babel缓存编译缓存的是索引，即hash值，非常吃内存，每次开发完记得清理内存 babel-polyfill按需加载在某些非常复杂的场景下比较适合 prefetch,preload对首屏优化提升是明显 代码分割不管什么技术栈，一
自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。
每个前端项目或者说每一个HTML页面，都有着不同的静态资源，其中js文件有相互之间又有着不同的依赖，img图片需要进行图片压缩合并，css文件有需要进行浏览器样式的兼容写法，这些都可以通过webpack这个工具把所有不同的文件用一个引子进行打包最终生成一份 html ，css ，以及图片资源。构建之后的文件，就是发布到线上的最终文件，也成为发布文件。
默认配置文件 webpack.config.js，可以通过 webpack --config 指定配置文件
在项目根目录下新建 webpack.config.js，作为 webpack 的默认配置文件。
这次的文章主题是「webpack」，将叙述我在腾讯的QAPM项目中进行前端工程化的实践，前方高能预警⚠️
前端优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有写不好的地方，也请指出来，我会积极改进，共同成长。
使用该插件，可以在编辑过程中去计算 loader 跟 plugin 的运行时间，针对性的看下某个环境构建速度过慢的原因
所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
Webpack是一个模块打包工具，在Webpack里一切文件皆模块。通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合的文件。Webpack专注构建模块化项目。 Webpack可以看作是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其他一些不能被浏览器直接运行的扩展语音(如：Scss,TypeScript等)，并将其打包为合适的格式以供浏览器使用。
让我们把目光先聚焦到即将破土而出的 Webpack 5 上，尽管国内外已经有抢鲜试水的尝试，其中也不乏@张立理的文章：Webpack 5 升级实验，讲述升级路径和体会，但是尚没发现从技术原理角度的设计解析。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
