刪除未使用的js/css參考

我是網絡開發新手，正在使用Laravel。爲此，我購買了一個已經包含Laravel的HTML管理頁面模板（基本上Laravel加上HTML中已經設置的主題）。現在我正在使用模板內部各處的一些元素，並且我最終得到了長長的參考列表。我不認爲這是必要的，甚至認爲不錯的代碼（而不是HTML標記），我甚至試圖刪除一些引用，但由於某種原因，頁面的某些元素不再正常工作。刪除未使用的js/css參考

例如，我從包含在模板中的HTML頁面中選擇某個按鈕元素，然後複製代碼並將其粘貼到我需要的位置。我也複製引用，但不一定是所有引用（因爲頁面上不僅有按鈕）。然而，沒有任何參考文獻在一個搞砸了的頁面中結束，只有很少的東西可以工作。我不知道是否有像任何工具，它會自動刪除這些言論，因爲我覺得，相對於頁面的實際大小/內容（這僅僅是輸入您的個人數據的形式）以下是荒謬的：

<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/> 
    <!--page level styles--> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/> 
    <!--End of page styles--> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" /> 
    <!-- end of plugin styles --> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" /> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/> 
    <!--End of plugin styles--> 
    <!--Page level styles--> 
    <link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>

（不要忘記底部的所有JS！）

來源

2017-09-11 John

哇，什麼混亂:) – WaldemarIce

只需在首選編輯器中打開所有文件，按下CTRL + H，然後在所有打開的文檔中全部替換它們，保存文件並將它們發送回服務器。 – rndus2r

問題是，你正在使用很多庫...使這些代碼是必要的！除了將所有內容縮小到一個文件並儘量避免使用這麼多不同的工具之外，你沒有太多的辦法可以做到這一點 – Salketer

-2

您可以檢查特定的網頁。在檢查期間，您可以在控制檯中找到css/js文件中的錯誤/未使用部分。他們基本上用行號命名未使用的文件。

來源

2017-09-11 15:13:30

只需簡單地通過單擊快捷方式（控制+ shift + I）訪問Google的開發人員，然後轉到審覈選項卡，即可找到所有細節和性能審覈報告。從那裏你可以找到使用和未使用的CSS和JavaScript代碼。

來源

2017-09-11 16:09:39

刪除未使用的js/css參考

回答

相關問題