Laravel webpack vue代码拆分延迟路由未进行版本控制
我正在从事一个Laravel+Vue SPA项目，我试图通过代码拆分和定义延迟路由来优化该项目，但现在没有对每个延迟路由文件进行版本控制 让我们看看我能否描述一下这个问题 您可以在这里看到主文件的版本：Laravel webpack vue代码拆分延迟路由未进行版本控制,laravel,vue.js,webpack,routes,code-splitting,Laravel,Vue.js,Webpack,Routes,Code Splitting,我正在从事一个Laravel+Vue SPA项目，我试图通过代码拆分和定义延迟路由来优化该项目，但现在没有对每个延迟路由文件进行版本控制 让我们看看我能否描述一下这个问题 您可以在这里看到主文件的版本：app.css，app.js，vendors.js。 但是users.js会发生什么呢？这是一条懒散的路线 app.blade.php <!doctype html> <html lang="ca_ES"> <head> <l
app.cssapp.jsvendors.jsusers.js会发生什么呢？这是一条懒散的路线
app.blade.php
<!doctype html>
<html lang="ca_ES">
<head>
<link rel="manifest" href="/fullscreen-manifest.json">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('favicon.png') }}">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500,700,900|Material+Icons' rel="stylesheet">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}" defer></script>
<script src="{{ mix('vendors.js') }}" defer></script>
</body>
</html>
users.js
const home = () => import(/* webpackChunkName: "home" */ '@/pages/home');
const login = () => import(/* webpackChunkName: "home" */ '@/pages/auth/login');
const pageNotFound = () => import(/* webpackChunkName: "home" */ '@/pages/errors/404');
const pageForbidden = () => import(/* webpackChunkName: "home" */ '@/pages/errors/403');
import users from "./users";
import profile from "./profile";
(...)
export default [
...users,
...profile,
(...)
{
path: '/',
name: 'home',
component: home,
meta: {
auth: true,
}
},
{
path: '/forbidden',
name: '403',
component: pageForbidden,
meta: {
auth: true,
}
},
{
path: '/login',
name: 'login',
component: login,
meta: {
guest: true,
}
},
{
path: '*',
name: '404',
component: pageNotFound,
}
];
const users = () => import(/* webpackChunkName: "users" */ '@/pages/users/index');
const show = () => import(/* webpackChunkName: "users" */ '@/pages/users/show');
export default [
{
path: '/users',
name: 'users',
component: users,
meta: {
auth: true,
admin: true,
}
},
{
path: '/show/:id',
name: 'users.show',
component: show,
meta: {
auth: true,
admin: true,
}
},
];
const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const moment = require('moment');
module.exports = {
output: {
chunkFilename: '[name].js',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.join(__dirname, './resources/js'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: 'bundle-analyzer-plugin/reports/' + moment().format('YYYYMMDD') + '.html'
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7
}),
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
const config = require('./webpack.config');
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/pdf.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
mix.webpackConfig(config);
webpack.config.js
const home = () => import(/* webpackChunkName: "home" */ '@/pages/home');
const login = () => import(/* webpackChunkName: "home" */ '@/pages/auth/login');
const pageNotFound = () => import(/* webpackChunkName: "home" */ '@/pages/errors/404');
const pageForbidden = () => import(/* webpackChunkName: "home" */ '@/pages/errors/403');
import users from "./users";
import profile from "./profile";
(...)
export default [
...users,
...profile,
(...)
{
path: '/',
name: 'home',
component: home,
meta: {
auth: true,
}
},
{
path: '/forbidden',
name: '403',
component: pageForbidden,
meta: {
auth: true,
}
},
{
path: '/login',
name: 'login',
component: login,
meta: {
guest: true,
}
},
{
path: '*',
name: '404',
component: pageNotFound,
}
];
const users = () => import(/* webpackChunkName: "users" */ '@/pages/users/index');
const show = () => import(/* webpackChunkName: "users" */ '@/pages/users/show');
export default [
{
path: '/users',
name: 'users',
component: users,
meta: {
auth: true,
admin: true,
}
},
{
path: '/show/:id',
name: 'users.show',
component: show,
meta: {
auth: true,
admin: true,
}
},
];
const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const moment = require('moment');
module.exports = {
output: {
chunkFilename: '[name].js',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.join(__dirname, './resources/js'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: 'bundle-analyzer-plugin/reports/' + moment().format('YYYYMMDD') + '.html'
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7
}),
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
const config = require('./webpack.config');
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/pdf.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
mix.webpackConfig(config);
webpack.mix.js
const home = () => import(/* webpackChunkName: "home" */ '@/pages/home');
const login = () => import(/* webpackChunkName: "home" */ '@/pages/auth/login');
const pageNotFound = () => import(/* webpackChunkName: "home" */ '@/pages/errors/404');
const pageForbidden = () => import(/* webpackChunkName: "home" */ '@/pages/errors/403');
import users from "./users";
import profile from "./profile";
(...)
export default [
...users,
...profile,
(...)
{
path: '/',
name: 'home',
component: home,
meta: {
auth: true,
}
},
{
path: '/forbidden',
name: '403',
component: pageForbidden,
meta: {
auth: true,
}
},
{
path: '/login',
name: 'login',
component: login,
meta: {
guest: true,
}
},
{
path: '*',
name: '404',
component: pageNotFound,
}
];
const users = () => import(/* webpackChunkName: "users" */ '@/pages/users/index');
const show = () => import(/* webpackChunkName: "users" */ '@/pages/users/show');
export default [
{
path: '/users',
name: 'users',
component: users,
meta: {
auth: true,
admin: true,
}
},
{
path: '/show/:id',
name: 'users.show',
component: show,
meta: {
auth: true,
admin: true,
}
},
];
const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const moment = require('moment');
module.exports = {
output: {
chunkFilename: '[name].js',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.join(__dirname, './resources/js'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: 'bundle-analyzer-plugin/reports/' + moment().format('YYYYMMDD') + '.html'
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7
}),
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
const config = require('./webpack.config');
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/pdf.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
mix.webpackConfig(config);
那么我做错了什么？我可以导入app.blade.php上的所有惰性路由文件，它将使用版本控制进行导入，但我将忽略这一点。。。这个想法是，当网站需要这些文件时，这些文件会被包括进来。但是当它们自动执行此操作时，它不会进行版本控制。因为您使用的是Vue路由器
，所以您应该像这样使用动态导入
导出默认值[
{
路径：'/users'，
名称：'用户'，
组件：（）=>import（'@/pages/users/index'），
元：{
作者：是的，
管理员：是的，
}
},
{
路径：'/show/：id'，
名称：“users.show”，
组件：导入（'@/pages/users/show'），
元：{
作者：是的，
管理员：是的，
}
},
];
ref link你能把你的route.js
或路由器文件更新吗，你可以看到我使用了很多文件来获得更好的结构。你有没有尝试过将你的版本附加到chunkFilename
比如chunkFilename:'[name].js？t='+new Date（）.getTime（）
？那么问题出在app.blade.php
上，我无法导入vendors.js<代码>无法找到混合文件：/vendors.js。（视图：/var/www/html/resources/views/app.blade.php）constconst