Webpack 打包问题

Question

有一个公共的组件 DrawChart.vue ， 因为引入了 echart.js ,所以这个组件会比较大。

在使用路由懒加载的情况下，有三个页面使用了这个公共组件，打包后三个页面都有200多kb，看了下就是因为 DrawChart.vue(其它代码非常少，并没有引入其它包),应该是 DrawChart.vue 被打包了三次放入了这三个页面。

问下有没有什么办法只让这个组件打包一次。

Answer 1

使用异步组件即可，参见 Vue 官方文档

踩这个答案的，你的良心不会痛吗？这个答案告诉你需要了解的概念，以及从哪里可以获取最正确最权威的指导。

可以指出哪里需要改进，如何改进，而不是只是这么暗戳戳地踩一下吗？

学习是你自己的事，少年

Answer 2

如果你用的是 vue-cli 的 webpack 模板建的项目，那么你需要在 build/webpack.prod.conf.js 中加再一个 CommonsChunkPlugin：

...
new webpack.optimize.CommonsChunkPlugin({
  children: true,
  minChunks: 2
}),
...其他的 CommonsChunkPlugin 保持不变

以你的项目为例，上面的插件告诉 webpack, 三个页面都用到了 DrawChart.vue，第一步先把这个组件的代码单独拎出来，打包到 app.[hash].js 中（entry 中只有 app 这一个入口，所以会打包到这），不过由于项目中还有个如下的配置 CommonsChunkPlugin:

// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

于是 webpack 就会把 app.[hash].js 文件中的 node_modules 部分移到 vendor.[hash].js 文件中

因此，上面加的一个配置会让你的 DrawChart.vue 中自己写的业务代码打包 app.[hash].js 中，而 echarts 会被打包到 vendor.[hash].js 中，从而避免每个页面打包重复的代码

如果你的项目不是 cli 直接生成的，建议认真阅读一波 CommonsChunkPlugin，解决方案就在文档中

Answer 3

公用组件在打包时只会打包一次的，你说的200多k，应该是echart的。需要把echart分离出去。