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 来编译你的资产，你可以阅读 Webpack here 和 npm here。

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>