前端工程化部分面试必备知识点

原创

代码搬运媛 2024-05-20 15:09:39 ©著作权

文章标签 前端面试职场和发展加载 css 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者代码搬运媛的原创作品，请联系作者获取转载授权，否则将追究法律责任

压缩代码

删除多余的代码、注释、简化代码的写法等等方式。

可以利用 webpack 的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩 JS 文件，利用 cssnano 来压缩 css 利用 CDN 加速。

利⽤webpack 对于 output 参数和各 loader 的publicPath 参数来修改资源路径Tree Shaking: 将代码中永远不会⾛到的⽚段删除。

通过在启动 webpack 时追加参数 --optimize-minimize 来实现Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。

提取公共第三方库：SplitChunksPlugin 插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

webpack 与 grunt、gulp 的不同？

Grunt、Gulp 是基于任务运⾏的⼯具：它们会⾃动执⾏指定的任务，就像流⽔线，把资源放上去然后通过不同插件进⾏加⼯，它们包含活跃的社区，丰富的插件，能⽅便的打造各种⼯作流。

Webpack 是基于模块化打包的⼯具: ⾃动化处理模块，webpack 把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图 (dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。

webpack、rollup 优劣？

webpack 适⽤于⼤型复杂的前端站点构建:webpack 有强⼤的 loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤，执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发。

rollup 适⽤于基础库的打包，如 vue、d3 等:Rollup 就是将各个模块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码,可以最⼤程度上降低代码体积,但是 rollup 没有 webpack 如此多的的如代码分割、按需加载等⾼级功能，其更聚焦于库的打包，因此更适合库的开发。

有哪些常见的 Loader？

file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL去引⽤输出的⽂件url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以base64 的⽅式把⽂件内容注⼊到代码中去source-map-loader：加载额外的Source Map ⽂件，以⽅便断点调试image-loader：加载并且压缩图⽚⽂件

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性

style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。

eslint-loader：通过 ESLint 检查 JavaScript 代码

注意：在 Webpack 中，loader 的执行顺序是从右向左执行的。因为webpack 选择了 compose
这样的函数式编程方式，这种方式的表达式执行是从右向左的。

有哪些常见的 Plugin

define-plugin：定义环境变量
html-webpack-plugin：简化 html⽂件创建
uglifyjs-webpack-plugin：通过 UglifyES 压缩ES6 代码
webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度
webpack-bundle-analyzer: 可视化 webpack 输出⽂件的体积
mini-css-extract-plugin: CSS 提取到单独的⽂件中，⽀持按需加载

bundle、chunk、module 是什么？

bundle: 是由 webpack 打包出来的文件
chunk: 代码块，一个 chunk 由多个模块组合而成，用于代码的合并和分割
module：是开发中的单个模块，在 webpack 的世界，一切皆模块，一个模块对应一个文件， webpack 会从配置的 entry 中递归开始找到所有依赖的模块。