未使用JS/CSSリファレンス

Question

私はWeb開発に新たなんだとLaravelを使用していますを削除します。このために、私はすでにLaravelを含んでいるHTML管理ページテンプレートを購入しました（基本的にLaravelとHTMLのテーマが既に設定されています）。今私はテンプレートの中のどこからでもいくつかの要素を使用していて、私はがひどく長い参照リストを持つことになりました。私はこれが必要であるとは考えていないし、良いコード（HTMLマークアップではない）だと思っていますし、参照のいくつかを削除しようとしても、何らかの理由でページの一部の要素が正しく動作しません。

例えば、私はテンプレートに含まれる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を忘れないように！）

Answer 1

あなたは、特定のウェブページを閲覧することができます。検査中に、コンソールでcss/jsファイルのエラー/未使用部分を見つけることができます。基本的には、未使用のファイルに行番号を付けます。

Answer 2

は、単にショートカット（コントロール+シフト+ I）をクリックすることで、Googleの開発者に移動して監査]タブに移動し、あなたはすべての詳細とパフォーマンスの監査報告書を見つけます。そこから、使用されたCSSとJavaScriptのコードを見つけることができます。