webpack
文章平均质量分 90
追逐、
这个作者很懒,什么都没留下…
展开
-
使用虚拟node_modules 对webapck前端CI重构-150%的速度提升
项目首次构建无修改二次构建修改文件二次构建不采用任何缓存211211211仅采用文件缓存23141.893.4采用文件缓存+babel -loader缓存2304293原创 2021-03-01 22:20:22 · 399 阅读 · 0 评论 -
Webpack5 升级小结
一、背景二、步骤2.1 升级webpack5 npm 包至 5.9.0以下的 configuration 标识配置的根对象2.2 npm run build2.1 configuration.node 不兼容:5.x 版本node只有3个配置项。详见 这里4.x node 配置 详见这里这里修改前:node: { module: 'empty', dgram: 'empty', dns: 'mock', fs: 'empty'原创 2021-01-11 15:00:17 · 5406 阅读 · 0 评论 -
Webpack5 内置缓存方案探索
背景随着Babel、TypeScript、VueLoader、Terser等编译、转译技术的大规模使用,Webpack的编译时间正不断膨胀。为了优化编译速度,社区主要有两种方案:通过把loader的处理结果缓存到本地磁盘,来加速二次编译通过预编译dll让webpack跳过一些模块的编译,来加速编译这些方案在一定程度上解决了编译速度慢的问题,但随之而来的是成堆的配置,严重影响了Webpack的使用体验,甚至出现了“Webpack配置工程师”这种“新职业”。与此同时,社区出现了一些新兴的编译技术,转载 2021-01-04 09:52:31 · 2198 阅读 · 0 评论 -
Webpack 插件扫盲系列(五) PnpWebpackPlugin和ModuleScopePlugin
一、背景什么是Pnp?可以详见本人的这篇博客。Pnp实际是yarn的一个特性,所以说如果你的项目中不使用yarn构建,那就可以不用使用这个插件。其次,即使你使用了yarn,如果不通过文中所述的开启pnp的方法去启用pnp,那这个插件对你来说也是无用的。二、使用大家知道webpack的reslove模块是用来配置模块解析规则的。如果你的项目中启用了pnp,那么想象一下,最基本的,就是你没有node_modules文件夹了。你的所有的依赖配置都会存储在.pnp.js文件中(实际依赖项安装在系统根目录),这原创 2021-01-03 10:20:20 · 3153 阅读 · 0 评论 -
npm 与 yarn 发展史
一、 javascript 中包管理的历史npm 出现之前:前端依赖项是保存到存储库中并手动下载的2010:npm 发布并支持 nodejs2012:npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持2012:npm 有了一个竞争对手 bower,它完全支持浏览器2012-2016:前端项目的依赖项数量成倍增加2012-2016:构建和安装前端应用变得越来越慢2012-2016:大量(重复的)依赖项存储在神奇的 node_modules 内原创 2020-12-31 15:49:49 · 1045 阅读 · 0 评论 -
Webpack 插件扫盲系列(四) WorkboxWebpackPlugin
一、背景要了解WorkboxWebpackPlugin,首先需要说两个概念:第一个是ServiceWorker,第二个是PWA。ServiceWorker 本人写了一篇浅谈,大家可以先看一下。关于PWA,网上的讲解也很多,大家看完ServiceWorker,就知道ServiceWorker其实是基于WebWorker的一门技术。而PWA,就是基于ServiceWorker的一门技术。#mermaid-svg-gugOl7MTKFg3nMxO .label{font-family:'trebuchet m原创 2020-12-29 19:24:56 · 5493 阅读 · 0 评论 -
Webpack 插件扫盲系列(三) webpack.TerserWebpackPlugin、webpack.UglifyjsWebpackPlugin和ParallelUglifyPlugin
一、背景这三种插件都是Webpack常用的压缩代码插件。这三者有什么不同?使用的时候有什么注意点?接下来我们一起探究一下。一、webpack.UglifyjsWebpackPlugin这个是Webpack官方维护,用Uglifyjs进行代码压缩的插件。它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树,再去应用各种规则分析和处理AST,导致这个过程耗时非常大)原创 2020-11-04 15:21:24 · 5322 阅读 · 0 评论 -
Webpack之 hash、 chunkhash 、 contenthash
一、背景对于Webpack的output属性,大家都知道可以配置文件的输出名称。一般来说,默认的配置都是这样:output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist')}翻看官方文档,我们发现hash 还可以替换为 chunkhash,那么这些到底有什么区别?对于我们的意义又是什么?我们知道,浏览器为了优化体验,会有缓存机制。如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接原创 2020-11-04 11:58:51 · 1567 阅读 · 0 评论 -
Webpack 插件扫盲系列(二)webpack.DllPlugin 和 webpack.DllReferencePlugin
一、概念DLLPlugin和 DLLReferencePlugin用某种方法实现了拆分 bundles,同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译,只需要编译一次,编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译,而是直接使用 DllReferencePlugin 来引用动态链接库的代码。一般会对常用的第三方模块使用这种方式,例如 react、react-dom、lodash 等。只要这些模块不升级更新,这些动态链接库就不需要重新编译。故我们需要创建一个原创 2020-07-07 14:31:35 · 887 阅读 · 0 评论 -
Webpack 插件扫盲系列(一) AddAssetHtmlPlugin和webpack.ProvidePlugin
AddAssetHtmlPlugin这个插件调用的npm包名是 add-asset-html-webpack-plugin,经常和html-webpack-tags-plugin做对比。作用其实二者相同,当我们想在跟页面打包后,插入我们特定script的引用,来达到全局变量的效果(暴露在Window下)。new AddAssetHtmlPlugin([ {filepath: path.resolve(__dirname, '../src/axios.min.js'), ou原创 2020-06-08 19:04:29 · 10521 阅读 · 0 评论 -
webpack打包原理 ? 看完这篇你就懂了 !
一、前言看到一个关于通过实践代码,将webpack讲的非常好的文章。拿过来给大家分享一下,强烈建议准备一个IDE 按照步骤编写代码,完事后,会有非常大的收获。什么是webpack?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency grap...转载 2020-04-23 15:59:44 · 845 阅读 · 0 评论 -
从零开始使用webpack(4.x)+bable+react+ant-design配置单页面应用开发环境(附模板)
从零开始使用webpack+react+antd搭建web项目(附模板)前言准备工作1 建立项目目录2 安装webpack3 准备项目文件结构二 配置webpack的工作1 基础配置2 配置webpack-dev-server三 使用React开发页面四 使用Webpack、Babel和React开发页面1 生成我们的html功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图......原创 2019-02-22 18:08:59 · 1052 阅读 · 0 评论