Webpack知识点脑图
2022-06-21 16:16:50 0 举报AI智能生成
Webpack知识点脑图
作者其他创作
大纲/内容
理论
前端工程化
文档化
组件化
自动化
模块化
构建工具
npm script
grunt
gulp
fis3
webpack
rollup
入门篇
核心概念
entry
bundle
plugin
loader
devserver
output
module
其它
target
devtool
watch
externals
实战
ES6 babel
Typescript
Flow检查器
SCSS
PostCSS
JSX
npm模块发布
PWA离线工具
异常监控集成
埋点服务集成
代码检查
图片加载
SVG加载
字体图标
mock服务
SourceMap
优化
提高打包效率--运行时优化
构建耗时分析
优化resolve
resolve配置webpack如何寻找模块所对应文件
externals
CDN上减少webpack打包出来的js体积
缩小范围
noParse
IgnorePlugin
多进程配置
ParalleUglify
HappyPack
DLLplugin
子主题
替换高性能编译器
ESBuild
环境区分策略
HMR热更新
提高页面性能
输出结果分析
可视化输出工具
压缩代码
JS
CSS
CDN
Treeshaking
提取公共代码
代码分割chunck
入口点分割
动态加载分割
公共代码分割
prepack
按需加载和懒加载
Scope Hoisting
作用域提升
prefetch与preloader
Servicework懒加载与预加载
清除无用css
前端架构工程化
100个人一个项目永远不行
分而治之
措施
私有npm
monorepo
模块联邦
pnpm
CLI工具
生命周期管理
CI/CO
微前端
原理篇
webpack工作流程
手写webpack
输出文件分析
手写treeshaking
模拟作用域链
手写loader
手写plugin
compiler
事件流
sourcemap自动上传插件
webpack源码解析与断点调试
他山之石
Vue-cli的webpack配置
Element-admin的webpack配置
element3的自动文档化webpack配置
antd-admin配置
展望
Bundle与Bundleless之争
Vite+ESmodule时代
0 条评论
下一页
