Laravel 5網站中的CSS和JavaScript文件

Question

我的Laravel 5.5網站上有很多CSS和JavaScript文件，導致加載緩慢。 我該如何解決？ 這些是文件：

<link rel="stylesheet" href="css/EdusecCustome.css">
<link rel="stylesheet" href="css/thead.css">
<link rel="stylesheet" href="css/AdminLTE-rtl.css">
<link href="/css/AdminLTE.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="css/bootstrap-rtl.css">
<link href="css/jquery.dataTables.min.css"rel="stylesheet">
<link rel="stylesheet"href="css/responsive.dataTables.min.css">
<link href="css/fixedColumns.dataTables.min.css"rel="stylesheet">
<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/stylepanel.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.timepicker.min.css">
<link href="css/dataTables.tableTools.css" rel="stylesheet">

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/pdfmake.js" charset="utf-8"></script>
<script src="js/vfs_fonts_times_new_roman.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/datatables.bootstrap.js"></script>
<script src="js/dataTables.buttons.js"></script>
<script src="js/buttons.flash.js"></script>
<script src="js/buttons.html5.js"></script>
<script src="js/buttons.colVis.min.js"></script>
<script src="js/buttons.print.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/dataTables.fixedColumns.min.js"></script>
<script src="js/dataTables.rowReorder.min.js"></script>
<script src="js/dataTables.tableTools.js"></script>
<script src="js/jquery.timepicker.js"></script>

Answer 1

我相信Laravel Mix可以解決您的問題。 它使用Webpack和npm來編譯您的資產，您可以在此處和npm了解有關Webpack的信息 。

Answer 2

您可以使用webpack.mix.js ，它將以最小化方式將這些文件css構建在一個文件中（使用js的相同操作）。 看下面的例子：

 let mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.styles([ 'resources/assets/admin/bootstrap/css/bootstrap.min.css', 'resources/assets/admin/font-awesome/4.5.0/css/font-awesome.min.css', 'resources/assets/admin/ionicons/2.0.1/css/ionicons.min.css', 'resources/assets/admin/plugins/iCheck/minimal/_all.css', 'resources/assets/admin/plugins/datepicker/datepicker3.css', 'resources/assets/admin/plugins/select2/select2.min.css', 'resources/assets/admin/plugins/datatables/dataTables.bootstrap.css', 'resources/assets/admin/dist/css/AdminLTE.min.css', 'resources/assets/admin/dist/css/skins/_all-skins.min.css' ], 'public/css/admin.css'); mix.js('resources/assets/admin/bootstrap/js/bootstrap.min.js','public/js') mix.scripts([ 'resources/assets/admin/plugins/jQuery/jquery-2.2.3.min.js', 'resources/assets/admin/bootstrap/js/bootstrap.min.js', 'resources/assets/admin/plugins/select2/select2.full.min.js', 'resources/assets/admin/plugins/datepicker/bootstrap-datepicker.js', 'resources/assets/admin/plugins/datatables/jquery.dataTables.min.js', 'resources/assets/admin/plugins/datatables/dataTables.bootstrap.min.js', 'resources/assets/admin/plugins/slimScroll/jquery.slimscroll.min.js', 'resources/assets/admin/plugins/fastclick/fastclick.js', 'resources/assets/admin/plugins/iCheck/icheck.min.js', 'resources/assets/admin/dist/js/app.min.js', 'resources/assets/admin/dist/js/demo.js', 'resources/assets/admin/dist/js/scripts.js' ], 'public/js/admin.js'); mix.copy('resources/assets/admin/bootstrap/fonts', 'public/fonts'); mix.copy('resources/assets/admin/dist/fonts', 'public/fonts'); mix.copy('resources/assets/admin/dist/img', 'public/img'); mix.copy('resources/assets/admin/plugins/iCheck/minimal/blue.png', 'public/css'); mix.styles([ 'resources/assets/front/css/bootstrap.min.css', 'resources/assets/front/css/font-awesome.min.css', 'resources/assets/front/css/animate.min.css', 'resources/assets/front/css/owl.carousel.css', 'resources/assets/front/css/owl.theme.css', 'resources/assets/front/css/owl.transitions.css', 'resources/assets/front/css/style.css', 'resources/assets/front/css/responsive.css' ],'public/css/front.css'); mix.scripts([ 'resources/assets/front/js/jquery-1.11.3.min.js', 'resources/assets/front/js/bootstrap.min.js', 'resources/assets/front/js/owl.carousel.min.js', 'resources/assets/front/js/jquery.stickit.min.js', 'resources/assets/front/js/menu.js', 'resources/assets/front/js/scripts.js' ], 'public/js/front.js'); mix.copy('resources/assets/front/fonts', 'public/fonts'); mix.copy('resources/assets/front/images', 'public/images'); mix.copy('resources/assets/admin/dist/img', 'public/img') 

在我的布局中：

 <link rel="stylesheet" href="/css/admin.css"> ..... <script src="/js/admin.js"></script>