注意
如果您使用的是 Babel，你将需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。
在vue-cli3.0里面使用路由懒加载需要安装syntax-dynamic-import插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
- 安装之后 在 babel.config 修改
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
'@babel/plugin-syntax-dynamic-import'
]
]
}
把组件按组分块
- 注释语法来提供 chunk name (需要 Webpack > 2.4)
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
新的vue-cli3.0突然发现network一下子全请求了，懒加载无效 发现在vue-cli3.0中会为所有的js和css资源增加prefetch参数，app、vendors会增加preload参数。
组件提前用prefetch请求，组件使用时创建时动态创建script标签
- vue.config.js增加如下配置，取消prefetch和preload
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
}
