Laravel-mix下的VueSPA开发

一些日常开发用到的东西

懒加载

在单页面应用中都是通过js调用显示不同的页面内容,但是当页面数量特别多的时候,所有的页面都会被打包进一个app.js文件中,这会导致这个文件特别大,在用户访问时,会占用大量的HTTP资源。

通过vue-router的懒加载功能我们可以让用户在只看其中一两个模块时,让模块按需加载,而不是一次性全部加载。

普通加载写法

1
2
3
4
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const routes = [
{ path: '/example', component: example-component }
]

懒加载写法

1
2
3
4
5
const example-component = () => import('./components/example-component ');

const routes = [
{ path: '/example', component: example-component }
]

倘若在解析中报错 则需要安装 ==syntax-dynamic-import== 一个实现按需加载的插件

1
cnpm install  --save-dev babel-plugin-syntax-dynamic-import

同时 在根路径创建文件 ==.balelrc==
文件内容如下

1
2
3
{
"plugins": ["syntax-dynamic-import"]
}

在 ==webpack.mix.js== 中配置模块js的存放路径

1
2
3
4
5
6
mix.webpackConfig({
output: {
publicPath: "/",
chunkFilename: 'js/lazy/[name].[chunkhash].js'
},
})