![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 91
webpack学习
圆圆01
这个作者很懒,什么都没留下…
展开
-
【Webpack 性能优化系列(7) - 懒加载和预加载】
懒加载或者按需加载,会在文件需要使用时才加载,是一种很好的优化网页或应用的方式。懒加载的使用加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。预加载 prefetch:会在使用之前,提前加载js文件,等其他资源加载完毕,浏览器空闲了,再偷偷加载资源原创 2021-09-01 22:38:26 · 2414 阅读 · 0 评论 -
【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度
通过`thread-loader`开启多进程打包,注意:请仅在耗时的操作中使用此 loader!因为每个 worker 都是一个独立的 node.js 进程,其开销大约为 600ms 左右。原创 2021-09-02 17:23:05 · 3643 阅读 · 0 评论 -
【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
渐进式网络应用程序(`progressive web application - PWA`)可以为我们的项目添加离线体验**,使用名为 `Workbox` 的 Google 项目,帮助我们更简单地为 web app 提供离线支持原创 2021-09-02 16:50:53 · 2447 阅读 · 2 评论 -
【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle,优化资源加载
`code splitting(代码分离)`是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。作用:代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。...原创 2021-09-01 20:49:59 · 2852 阅读 · 1 评论 -
【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码,减少代码体积!!!
`tree shaking` 是一个术语,用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 `import` 和 `export`。**`tree shaking` 可以去除未引用代码,减少代码体积。**原创 2021-09-01 16:50:30 · 2082 阅读 · 1 评论 -
【Webpack 性能优化系列(4) - 缓存 】详解如何做babel缓存和文件资源缓存
缓存我们会从两个点出发,一个是对bable进行缓存,另一个是对整体的文件资源进行缓存原创 2021-08-31 22:15:15 · 2200 阅读 · 3 评论 -
【Webpack 性能优化系列(3) - oneOf】
我们在写loader的时候,`rules`里面有非常非常多的loader规则,但是每个文件只能匹配一个 loader,被一个 loader 处理,因此可以使用 oneOf 唯一匹配,不需要每个文件把所有的 loader 都询问一遍,这样可以提高 loader 的执行效率原创 2021-08-31 01:07:29 · 1566 阅读 · 5 评论 -
【Webpack 性能优化系列(2) - source-map】
开发环境下如何调试代码,解决开发环境下调试代码问题,这个技术叫`source-map`,`source-map`: 一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误)原创 2021-08-31 00:43:12 · 1092 阅读 · 0 评论 -
【Webpack 性能优化系列(1) - HMR 热模块替换】
为什么要使用`HMR 热模块替换`功能?当我们修改css文件时,明明js文件没有变化,但js文件也被重新加载了一次,所以打包的时候,看似只修改了css文件,实际上是把js文件也重新打包了一次,这是一个问题。假设以后我们有100个js模块,100个样式模块,如果只修改其中某一个模块,这整200个模块就需要重新打包,这个速度可以想想是非常慢的,更不要说以后的模块会越来越多,那打包情况只会越来越慢。所以我们想实现这样的功能:如果只有一个模块发生变化,那么只需要修改这一个模块代码就足够了,其他模块理应是不变的原创 2021-08-30 17:45:49 · 1341 阅读 · 4 评论 -
【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理,如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel!!!
生产环境的特点是能让代码优化上线运行的环境。我们要做哪些事情呢?样式经过css-loader的处理被整合在js中,如果样式在js中的话,会让js体积非常大,下载就会慢;同时因为是先加载js才能通过创建style标签插入到页面中,这里就会出现闪屏现象。所以,我们就需要将css从js中提取出来;当然还需要对代码进行压缩和兼容性处理,这里包括html、css和js。.........原创 2021-08-27 23:07:14 · 1597 阅读 · 0 评论 -
【Webpack 开发环境配置】总结学习如何打包样式资源、html资源、图片资源和其他资源?devServer是什么,如何配置?
webpack 开箱即用,可以无需使用任何配置文件。然而,webpack 会假定项目的入口起点为 `src/index.js`,然后会在 `dist/main.js` 输出结果,并且**在生产环境开启压缩和优化**。通常你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个 `webpack.config.js` 文件,然后 webpack 会自动使用它。**`webpack.config.js`是webpack的配置文件。** 作用是:指示 webpack 干哪些活(当你运行 webpac原创 2021-08-19 23:34:37 · 2833 阅读 · 6 评论 -
【Webpack 简介及五个核心概念】
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。原创 2021-08-15 19:19:07 · 3496 阅读 · 5 评论