vue里vue组件是按需加载的，但是里面引入的js文件被打包进app.js里了

Question

因为在某个组件里引入了一个图表的静态js数据，很大，快1M了，webpack打包时将它打包进了主app.js里。我疑惑的是，这个组件是按需加载的，webpack怎么还是打包进了app.js里啊。我在该vue组件里用了
import.then()语法还是没效果

Answer 1

如果是vue-cli3可以在vue.config.js中进行配置

Answer 2

router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    routes: [{
        path: "/",
        redirect: {
            name: "games"
        }
    },
        //首页
        {
            path: "/index",
            name: "index",
            component: () =>
                import( /* webpackChunkName: "index" */ "./views/index/Index.vue")
        },
        //聊天页面
        {
            path: "/chat",
            name: "chat",
            component: () =>
                import( /* webpackChunkName: "chat" */ "./views/index/Chat.vue")
        },

main.js

import router from "./router";
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

通常都是这样用的

Answer 3

碰到同样的问题，但是测试了一下，我发现的一个解决办法是这样的：A组件（异步组件）的静态数据放在data.js中，B组件（同步组件）的静态数据也放置在data.js中，这样打包data.js的时候，会把所有的数据都打包在app.js这个主依赖文件中，所以要分开两个js文件，文件中一定只放异步数据或者是同步数据，包括函数的引用也是一样