vue路由懒加载配置webpackChunkName怎么不好用呢？

Question

因为spa项目打包完app.js太大 所以想分割app.js 但是这么配置完app.js并没有减小
vue-cli是2.x的
webpack是3.x的

 {
      path: '/inquiry_FCL/,
      component: () => import(/* webpackChunkName: "group-foo" */ '@/page/Foo.vue')
}

我就是这么写的, 有没有大佬知道还需要配置什么

有说要配置"syntax-dynamic-import" 但是配置完也不好用

理想状态是app.js减小 首屏加载时间得到优化

拜托各位大佬了

Answer 1

webpackChunkName的作用是将 后面 name: group-foo 相同的打包到文件为 group-foo.js

[
    {
        path: '/inquiry_FCL/,
        component: () => import(/* webpackChunkName: "group-foo" */ '@/page/Foo.vue')
    },
    {
        path: '/inquiry_FCL2/,
        component: () => import(/* webpackChunkName: "group-foo" */ '@/page/Foo2.vue')
    }
]

这时组件Foo.vue与Foo2.vue会打包到一个js里

---

优化包大小，可部分参考这篇文章

Answer 2

需要配置output.chunkFilename
使用[name]表示chunk的名称.
例如

// webpack.config.js
module.export = {
    output: {
        // others...
        chunkFilename: "chunks/[name].[contenthash:8].js"
    }
}