常見的前端工程化面試題彙總

1.場景：你是第一天來公司上班的，項目代碼託管在GitLab，項目地址：git@lab.com:org/project.git,如今有一處代碼須要你修改。請下完成此項任務中，與git/gitlab相關的操做步驟。

第一步：$> ssh-keygen -t rss -C zhangsan@abc.com

第二步：拷貝公鑰到gitlab

第三步：

$> git config —global user.name zhangsan

$> git config —global user.email zhangsan@abc.com

第四步：$> git clone git@lab.com:org/project.git

第五步：$> git checkout -b project-20170227-zhangsan-bugfix

第六步：修改代碼

第七步：git status

第八步：git add .

第九不：git commit -am ‘bugfix’

第八步：git push --set-upstream origin project-20170227-zhangsan-bugfix

2.CSS，JS代碼壓縮，以及代碼CDN託管，圖片整合。

（1）CSS,JS 代碼壓縮：

能夠應用gulp的gulp-uglify，gulp-minify-css模塊完成；能夠應用webpack的 UglifyJsPlugin壓縮插件完成。

（2）CDN：

內容分發網絡(CDN)是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。主要特色有：本地Cache加速，鏡像服務，遠程加速，帶寬優化。關鍵技術有：內容發佈，內容路由，內容交換，性能管理。CDN網站加速適合以諮詢爲主的網站。CDN是對域名加速不是對網站服務器加速。CDN和鏡像站比較不須要訪客手動選擇要訪問的鏡像站。CDN使用後網站無需任何修改便可使用CDN得到加速效果。若是經過CDN後看到的網頁仍是舊網頁，能夠經過URL推送服務解決，新增的網頁和圖片不須要URL推送。使用動態網頁能夠不緩存即時性要求很高的網頁和圖片。CDN能夠經過git或SVN來管理。

（3）圖片整合

減小網站加載時間的最有效的方式之一就是減小網站的HTTP請求數。實現這一目標的一個有效的方法就是經過CSS Sprites——將多個圖片整合到一個圖片中，而後再用CSS來定位。缺點是可維護性差。可使用百度的fis/webpack來自動化管理sprite。

3.如何利用webpack把代碼上傳服務器以及轉碼測試？

（1）代碼上傳：

可使用sftp-webpack-plugin，可是會把子文件夾給提取出來，不優雅。可使用gulp+webpack來實現。

（2）轉碼測試

webpack應用babel來對ES6轉碼，開啓devtool: 「source-map" 來進行瀏覽器測試。應用karma或mocha來作單元測試。

4.項目上線流程是怎樣的？

（1）流程建議

- 模擬線上的開發環境

本地反向代理線上真實環境開發便可。（apache，nginx，nodejs都可實現）

- 模擬線上的測試環境

模擬線上的測試環境，實際上是須要一臺有真實數據的測試機，建議沒條件搭daily的，就直接用線上數據測好了，只不過程序部分走大家的測試環境而已，有條件搭daily最好。

- 可連調的測試環境

可連調的測試環境，分爲2種。一種是開發測試都在一個局域網段，直接綁hosts便可，不在一個網段，就每人分配一臺虛擬的測試機，放在你們均可以訪問到的公司內網，代碼直接往上布便可。

- 自動化的上線系統

自動化的上線系統，能夠採用Jenkins。若是沒有，能夠自行搭建一個簡易的上線系統，原理是每次上線時都抽取最新的trunk或master，作一個tag，再打一個時間戳的標記，而後分發到cdn就好了。界面裏就2個功能，打tag，回滾到某tag，部署。

- 適合先後端的開發流程

開發流程依據公司所用到的工具，構建，框架。原則就是分散獨立開發，互相不干擾，連調時有hosts可綁便可。

（2）簡單的可操做流程

- 代碼經過git管理，新需求建立新分支，分支開發，主幹發佈

- 上線走簡易上線系統，參見上一節

- 經過gulp+webpack連到發佈系統，一鍵集成，本地只關心原碼開發

- 本地環境經過webpack反向代理的server

- 搭建基於linux的本地測試機，自動完成build+push功能

5.工程化怎麼管理的?

gulp和webpack

6.git經常使用命令

Workspace：工做區

Index / Stage：暫存區

Repository：倉庫區（或本地倉庫）

Remote：遠程倉庫

詳細參見： http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

7.webpack 和 gulp對比

Gulp 就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。說的形象點，「Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。」 另外，Gulp是經過task對整個開發過程進行構建。

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能實現對比：從基本概念、啓動本地Server、sass/less預編譯、模塊化開發、文件合併與壓縮、mock數據、版本控制、組件控制八個方面對Gulp和Webpack進行對比。

詳細參見： http://www.tuicool.com/articles/e632EbA

8.webpack打包文件太大怎麼辦?

webpack 把咱們全部的文件都打包成一個 JS 文件，這樣即便你是小項目，打包後的文件也會很是大。能夠從去除沒必要要的插件，提取第三方庫，代碼壓縮，代碼分割，設置緩存幾個方面着手優化。

詳細參見： http://www.jianshu.com/p/a64735eb0e2b

9.不想讓別人盜用你的圖片，訪問你的服務器資源該怎麼處理？

目前經常使用的防盜鏈方法主要有兩種：

（1）設置Referer：適合不想寫代碼的用戶，也適合喜歡開發的用戶

（2）簽名URL：適合喜歡開發的用戶

詳細參見： https://yq.aliyun.com/articles/57931

10.精靈圖和base64如何選擇？

css精靈，用於一些小的圖標不是特別多，一個的體積也稍大，好比大於10K（這個沒有嚴格的界定）。

base64，用於小圖標體積較小（相對於css精靈），多少都無所謂。字體圖標，用於一些別人作好的圖標庫（也有少數本身去作的）用起來比較方便，他的圖標只能用於單色，圖標用只能於一種顏色。

11.webpack怎麼引入第三方的庫？

拿jQuery爲例：

entry: {

page: 'path/to/page.js',

jquery: 'node_modules/jquery/dist/jquery.min.js'

}

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

chunks: ['jquery', 'page'] // 按照前後順序插入script標籤

})

12.若是線上出現bug git怎麼操做？

參見第1題。

13.用過Nginx嗎？都用過哪些？

nginx是一個高性能的HTTP和反向代理服務器。

常使用場景：

（1）反向代理

（2）網站負載均衡

詳細參見： http://www.cnblogs.com/hobinly/p/6023883.html