vue cli3.x 打包 路由懒加载

注意
如果您使用的是 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') 
  }