会员
众包
新闻
博问
闪存
赞助商
HarmonyOS
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
gogo2027
博客园
首页
新随笔
联系
订阅
管理
上一页
1
2
3
4
5
6
7
8
9
下一页
2022年11月8日
Webpack最佳实践
摘要: 先简单回顾下 webpack 原理 Webpack 可以看做是模块打包机,把解析的所有模块变成一个对象,然后通过入口模块去加载我们的东西,然后依次实现递归的依赖关系,通过入口来运行所有的文件。由于 webpack 只认识js,所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏
阅读全文
posted @ 2022-11-08 14:28 gogo2027
阅读(45)
评论(0)
推荐(0)
2022年11月7日
详解webpack构建优化
摘要: 当项目越来越复杂时,会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事,下面我们就从速度和体积两方面来探讨构建优化的策略。 分析工具 在优化之前,我们需要了解一些量化分析的工具,使用它们来帮助我们分析需要优化的点。 webpackbar webpac
阅读全文
posted @ 2022-11-07 15:27 gogo2027
阅读(106)
评论(0)
推荐(0)
Webpack中的plugin插件机制
摘要: 大家有没有遇到过这些问题: webpack 打包之后的文件没有压缩 静态文件要手动拷贝到输出目录 代码中写了很多环境判断的多余代码 上一篇 「webpack 核心特性」loader 说到 webpack 的 loader 机制,本文主要聊一聊另外一个核心特性:插件(plugin)。 插件机制就是为了
阅读全文
posted @ 2022-11-07 15:26 gogo2027
阅读(140)
评论(0)
推荐(0)
Webpack中的高级特性
摘要: 自从webpack4以后,官方帮我们集成了很多特性,比如在生产模式下代码压缩自动开启等,这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性:treeShaking 顾名思义treeShaking,就是摇树,那么体现在代码模块里面就是摇掉那些没有
阅读全文
posted @ 2022-11-07 15:24 gogo2027
阅读(29)
评论(0)
推荐(0)
2022年11月4日
手写一个webpack插件
摘要: 前言 前端性能优化是一个老生常谈的话题,关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容,有以下推荐 雅虎军规35条 某东上搜“前端性能优化”,书籍也特别多。 但是前端性能优化做的所有工作,都和一个灵魂拷问有极大的关系: 在浏览器输入url后,发生了什么? 首先url是一
阅读全文
posted @ 2022-11-04 12:35 gogo2027
阅读(25)
评论(0)
推荐(0)
教你手写webpack常用loader
摘要: 前言 webpack 作为目前主流的前端构建工具,我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来说, webpack 是一个足够开放的类库,提供了可插拔的方式去自定义一些配置,包括配置 loader 和 plugin ,本篇
阅读全文
posted @ 2022-11-04 12:35 gogo2027
阅读(82)
评论(0)
推荐(0)
深度解读Webpack中的loader原理
摘要: 一、前言 webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢? 没错就是通过 loader。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。 我们带着下面几个问题,
阅读全文
posted @ 2022-11-04 12:33 gogo2027
阅读(102)
评论(0)
推荐(0)
2022年11月2日
webpack高级配置
摘要: 摇树(tree shaking) 我主要是想说摇树失败的原因(tree shaking 失败的原因),先讲下摇树本身效果 什么是摇树? 举个例子 首先 webpack.config.js配置 const webpack = require("webpack"); /** * @type {webpa
阅读全文
posted @ 2022-11-02 09:46 gogo2027
阅读(98)
评论(0)
推荐(0)
一文彻底读懂webpack常用配置
摘要: 开发环境 const webpack = require("webpack"); const path = require('path') module.exports = { // entry: { // a: './src/0706/a.js', // c: './src/0706/c.js',
阅读全文
posted @ 2022-11-02 09:45 gogo2027
阅读(51)
评论(0)
推荐(0)
你需要知道的webpack高频面试题
摘要: 谈谈你对webpack的看法 webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,webpack有对应的模块加载器,而且
阅读全文
posted @ 2022-11-02 09:44 gogo2027
阅读(63)
评论(0)
推荐(0)
上一页
1
2
3
4
5
6
7
8
9
下一页
公告