前端面试每日3+2(第27天)

当你发现自己的才华撑不起你的野心时，就请安静下来学习吧！

鲁迅说过：答案仅供参考...

1、前端工程化工具有哪些？

解析：

grunt (opens new window)、gulp (opens new window)、webpack (opens new window)

2、webpack是什么？为什么要使用webpack？

解析：

• 官方：webpack是现代Javascript应用的静态模块打包器（moudle bundler）。 包含应用程序需要的每个模块，然后将所有模块打包成一个或者多个bundle。
• 开源的前端打包工具
• 提供了前端模块化开发方案，使用加载器将各种静态资源转换为模块
• 各个模块之间的依赖关系，然后使用loaders处理他们，最后生产一个压缩优化并合并后的静态资源。

目的：

• 模块化：把复杂的程序细化为小的文件，实现前端的模块化开发
• 编译：可以将浏览器不支持的es6、7以及TypeScript等语言编译成浏览器可识别的js；将sass、less等语言进行编译成css等
• 性能优化：压缩合并，可以对图片、js、css等静态资源进行压缩、合并。
• 性能前端自动化，提高了工作效率

3、webpack与grunt、gulp的不同？

解析：

• webpack：一整套前工程化解决方案：模块化解决方案 + 优化前端开发流程
• Grunt和Grunt：优化前端开发流程。要是解决重复任务的问题。Grunt、Gulp就是其中代表。比如: 压缩、编译less、sass、地址添加hash、替换等。

4、webpack打包原理？

解析：

• 把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

  webpack详解 (opens new window)

5、如何利用webpack来优化前端性能？

解析：

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

• 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
• 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
• 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
• 提取公共代码