《玩转webpack》 第三章 基础篇 Webpack 进阶用法cacheGroups: { commons: { name: 'commons', chunks: 'all', minChunks: 2 } } } } } }; minuSize: 分离的包体积的⼤大⼩小 tree shaking(摇树优化) 概念:1 个模块可能有多个⽅方法,只要其中的某个⽅方法使⽤用到了了,则整个⽂文件都会被打到 bundle ⾥里里⾯面去,tree shaking 就是只把⽤用到的⽅方法打⼊入 现象:构建后的代码存在⼤大量量闭包代码 编译后(bundle.js) 编译前 (source code) 会导致什什么问题? 运⾏行行代码时创建的函数作⽤用域变多,内存开销变⼤大 ⼤大量量作⽤用域包裹代码,导致体积增⼤大(模块越多越明显) 模块转换分析 结论: ·被 webpack 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 模块 模块初始化函数 __dirname + '/dist' }, plugins: [ + new webpack.optimize.ModuleConcatenationPlugin() }; 代码分割的意义 对于⼤大的 Web 应⽤用来讲,将所有的代码都放在⼀一个⽂文件中显然是不不够有效的,特别是当你的 某些代码块是在某些特殊的时候才会被使⽤用到。webpack 有⼀一个功能就是将你的代码库分割成 chunk0 码力 | 69 页 | 4.33 MB | 1 年前3
Rspack 基于 Rust 的高性能Web 构建工具「大前端新趋势」专场 何庚坤 2023年05月28日 本期议题:Rspack 基于 Rust 的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么? 2. Rspack 解决了什么问题? 3. Rspack 有哪些特性? 4. 如何从 Webpack 迁移到 Rspack?0 码力 | 29 页 | 4.51 MB | 1 年前3
《玩转webpack》 第四章 进阶篇: 编写可维护的 webpack 构建配置script 运行测试用例 发布到 npm 添加用户: npm adduser 升级补丁版本号:npm version patch 升级版本 升级小版本号:npm version minor 升级大版本号:npm version major 发布版本:npm publish Git 规范和 Changelog 生成 ·加快 Code Review 的流程 良好的 Git commit 规范优势:0 码力 | 30 页 | 5.38 MB | 1 年前3
共 3 条
- 1













