背景
公司大量存在用Laravel写的老前端项目，由于之前创建项目时的随意导致目前项目比较难维护并且加载缓慢，依赖凌乱，在对资源文件压缩上传cdn，图片懒加载的临时优化后，不得不要开始老项目的优化之路
ps 所有的实现用wabpack都可以实现，只是larave-mix更适合Laravel，配置也简单一些
Laravel-mix
larave-mix 是位于webpack顶层的一个简洁的配置层，是对webpack基于Laravel目录的一个封装，在 80% 的情况下使用 laravel mix 会使操作变的非常简单。
并且在Laravel项目里已经默认有了Laravel-mix的配置
- 安装 laravel
- 运行 npm install
- 查看 webpack.mix.js 文件 ，就可以开始使用了.
image.png
webpack.mix.js 是你在webpack上层的配置文件，大部分时间你需要修改的是这个文件
image.png
Laravel-mix也是可以打包vue项目的。然而我们的项目并不是所以直接看api
mix.js(src|[src], output)
简单的一行代码，larave mix可以执行很多重要的操作
ES2017+ 模块编译
创建并且编译vue组件(通过 vue-loader)
模块热替换(HMR)
Tree-shaking打包技术，webpack2里新增的(移除无用的库)
提取和拆分 vendor 库(通过mix.extract()方法), 使长期缓存变的容易
自动版本化(文件哈希)，通过 mix.version()
导入版本文件
这就引出了一个问题：如果名称不断变化，我们如何将这些版本化的脚本和样式表包含到 HTML 中呢？是的，这很棘手。答案将取决于你构建的应用程序的类型。对于 SPA，你可以动态地读取 Laravel Mix 生成的 manifest.json 文件，提取资料文件名 (这些名称将被更新，以反映新的版本文件)，然后生成 HTML。
Laravel 用户
对于 Laravel 项目，一个解决方案是开箱即用的。只需调用全局 mix() 函数，就完成了！我们将计算出导入的适当文件名。这里有一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<h1>Hello World</h1>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
将未散列的文件路径传递给 mix() 函数，然后在后端，我们将弄清楚应该导入哪个脚本或样式表。请注意，你可能 / 应该使用这个函数，即使没有对文件进行版本控制。
版本化附加文件
mix.version() 将自动生成编译后的 JavaScript、Sass/Less 或合并文件。但是，如果你还希望将额外的文件作为构建的一部分，简单地传递路径或路径数组，就像这样:
mix.version(['public/js/random.js']);
现在，我们会版本化任何相关的编译文件，但是我们还会附加一个查询字符串，public/js/random.js?{hash}，并更新 mix-manifest.json 文件。
组合文件
考虑下面的代码片段:
mix.combine(['one.js', 'two.js'], 'merged.js');
大概了解相关api后就可以和项目相互配合使用了
网友评论