這種前端架構好嗎？

01-22

一個小的信息管理系統
css：
每個頁面都寫成一個scss，

然後寫一個main.scss，裡面import所有scss,
每個頁面都載入壓縮後的main.css.
js:
用的是ng，

總體有兩個模板，一個是login，一個是管理應用。
每個模板里都有一個ng-view的div，通過ng的路由功能來載入對應的模塊。
每個頁面的controller分開來寫，最後合併成一個controller.js。
每個頁面要載入app.js 和這個總的controller.js，以及angular.js angular-route.js。
這個構架的好處是用戶初次登錄的時候載入完畢所有css和js，放到緩存里。

或者這種思路大家覺得不好，應該用webpack或者require來按需載入？

對於管理系統來說，按需載入絕對是偽需求。當然all in one 肯定也有問題。以前在requirejs下的做法是腳本按變動頻率分類，比如第三方庫變動頻率最低打包一個，所有的業務腳本變動頻率最高打包一個，還有一些業務插件這種變動頻率一般打包一個，最後就是有些比較大比較獨立的庫比如highcharts這種可以獨立打包。打包後的源代碼也不能太大，維持在gzip之後150kb左右。這樣能夠平衡好網路與瀏覽器的並發連接數對資源載入的影響。不過現在我開始使用es6與react，做法就是css兩個，js兩個，分別是第三方和業務腳本，這樣反而更省心，畢竟是管理系統嘛。至於效果還沒上線，不好說。

除非你是淘寶這種大型網站，我認為你現在的解決方案是好的。

你的成本是首次下載的文件偏大，但是整個系統架構比較簡單，方便開發。

我會採用你現在的方案。最後再說一句，前端的性能受latency的影響大，受bandwidth的影響小，所以文件大小的影響不是特別大。

這難道不就是最好的嗎，我們的程序員曾經把每個controller都分開寫在每個view模板上，然後分開載入看似每次都挺快，但是當要改動就哭人了，我要改個版本號，我要加個控制器加個directive加個service，他真的能夠給你找幾分鐘，後面的邏輯都亂了，你的方案一開始的載入代價換來的是一了百了，當然你最好只要在一個地方加js，其他地方視圖都由同一個index的ng-view來展現才行，那就方便很多，不過有個優化的方案就是，你每次更新後最好把更新過的js,css加個哈西值之類的，然後你的用戶再次載入的時候就只需要載入更改過的地方，其他則已經緩存，而達到優化了O(∩_∩)O