【前端知识点】了解编译、打包、构建和部署

192 阅读1分钟

编译

(1)浏览器只认识JavaScript、CSS、HTML代码;

(2)开发者通常通过各种框架(Vue/react/angular)来进行开发,还会涉及到typeScript、scss、sass、tailwindcss等浏览器不认识的语言,并且浏览器也并不完全兼容现代的JS语法如部分ES6、ES7语法,且不同的浏览器对语言的兼容程度不一样

所以通过编译来将开发人员的代码转换成浏览器认识的代码

打包

我们常常听说各种打包工具(webpack、vite、rollup等),那打包是什么呢?

编译完成的代码,其中有各种零碎的文件和不同模块,打包通过处理各个文件的依赖关系将所有css/JS/html文件合并成一个css/js/html文件,并且在打包过程中还可以通过各种优化手段来减少代码体积和请求数量来优化代码。

优化手段通常有:tree-shaking将冗余代码删除、css资源的压缩等

打包完成后,生成一个dist包其中包含打包完成的JS、CSS、HTML文件,并且会为每个文件加哈希值(为了浏览器的缓存机制)

构建

构建相当于编译+打包+资源优化的过程。

部署

部署则是将我们打包完成的代码上次到服务器上,让用户能够通过访问服务器获取相应的项目资源。 部署的相关工具有:FTP、Nginx、vercel、Docker等