上层打包器
2024-01-24 11:12:57 0 举报AI智能生成
上层打包器是一种将多个文件或软件包合并成一个大型软件包的工具，主要用于软件的分发和部署。这种打包器可以处理各种文件类型，如可执行文件、库文件、配置文件、文档等。通过将多个文件打包成一个单一的文件，上层打包器可以简化软件的安装和更新过程，同时也方便了软件的分发和传输。此外，上层打包器还可以为软件包添加一些修饰语，如版本信息、许可证信息、开发者信息等，以提高软件的可识别性和可靠性。
作者其他创作
大纲/内容
webpack
什么是webpack?
JavaScript 应用程序的静态模块打包器
从一个或多个入口点构建一个 依赖图(dependency graph)，然后将项目中所需的每一个模块组合成一个或多个 bundles
webpack是一个模块打包工具（bundler）
解析ESM依赖树--->构建--->启动dev serve服务
每次触发热更新前先构建
模块
entry（入口文件）
单个入口文件
多个入口文件
常用场景
分离应用程序和第三方库入口（可使用DllPlugin替换）
多页面应用程序
output（输出文件）
单入口
多入口
mode（环境）
development
production
loader（转换）
什么是loader?
1.处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。
2.第一个执行的loader接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作为参数。最后执行的loader会返回此模块的JavaScript源码
常用loader
style-loader
css-loader
sass-loader
babel-loader
file-loader
url-loader
vue-loader
eslint-loader
自定义loader
1.单一原则: 每个Loader只做一件事，简单易用，便于维护
2.链式调用: Webpack 会按顺序链式调用每个Loader；
3.统一原则: 遵循Webpack制定的设计规则和结构，输入与输出均为字符串，各个Loader完全独立，即插即用；
4.无状态原则：在转换不同模块时，不应该在loader中保留状态；
plugins（插件）
什么是plugins
常用plugins插件
外部
html-webpack-plugin
imagemin-webpack-plugin
clean-webpack-plugin
copy-webpack-plugin
mini-css-extract-plugin
uglifyjs-webpack-plugin
webpack-parallel-uglify-plugin
speed-measure-webpack-plugin
内部
webpack.ProvidePlugin
optimization.SplitChunks
ProvidePlugin
hot-module-replacement-plugin
hot-module-replacement-plugin
自定义插件
1.需要一个 JavaScript 命名函数 或 JavaScript 类
2.在插件函数的 prototype 上定义一个 apply() 方法
3.指定一个绑定到 命名函数 自身的 事件钩子
4.处理 webpack 内部实例的特定数据
5.功能完成后调用 webpack 提供的回调callback
modules（模块）
打包优化
1.thread-loader
2.cache-loader
子主题
3.hard-source-webpack-plugin
4.babel-loader开启缓存
5.uglifyjs-webpack-plugin开启多进程压缩
6.DllPlugin
7.exclude/include
vite
组成
依赖项模块
源码模块
采用了rollUp(打包)+esBuild(内部文件编译)
1.rollUp
什么是rollUp?
1.JavaScript 模块打包器
2.-将小块代码编译成大块复杂的代码
3.静态分析代码中的 import,排除任何未实际使用的代码 (Tree-shaking)
4.本身不支持devServer
模块
input
output
2.esBuild
优势
1.js是单线程串行，esbuild是新开一个进程，然后多线程并行，充分发挥多核优势
2.使用go语言编写是纯机器码，要比JIT快
3.不使用 AST（抽象语法树），优化了构建流程
4.在没有缓存的情况也能有极致的性能
劣势
esbuild 没有提供 AST（抽象语法树） 的操作能力。所以一些通过 AST 处理代码的 babel插件没有很好的方法过渡到 esbuild 中
优势
1.快速的冷启动
1.优先启动dev serve服务--->在浏览器中解析ESM模块
1.浏览器接管了打包程序的部分工作，在浏览器请求源码时进行转换并按需提供源码
2.在开发环境，通过type="module"的模式加载script代码 不需要通过任何的语法转化
3.在通过浏览器所支持的ES模块（ESM）动态引入所需模块,并提供一段应用程序代码,不必重新打包所有内容
2.运行时所有的访问地址都会被转化成文件系统，保证vite项目默认加载的都是ESM模块
2.快速的热更新
HMR 是在原生 ESM 上执行的
依赖预构建
自动依赖搜寻
vite在应用启动的时候，会在本地启动两个服务，一个是前端的路径服务，另一个是文件解析的后端服务，两个服务之间使用websocket进行连接
劣势
1.首屏加载缓慢
2.懒加载性能差
收藏
职业：本科
0 条评论
下一页
