Webpack 打包問題

使用異步組件即可，參見 Vue 官方文檔

踩這個答案的，你的良心不會痛嗎？這個答案告訴你需要了解的概念，以及從哪里可以獲取最正確最權(quán)威的指導(dǎo)。

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

學(xué)習(xí)是你自己的事，少年

公用組件在打包時只會打包一次的，你說的200多k，應(yīng)該是echart的。需要把echart分離出去。

如果你用的是 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 中自己寫的業(yè)務(wù)代碼打包 app.[hash].js 中，而 echarts 會被打包到 vendor.[hash].js 中，從而避免每個頁面打包重復(fù)的代碼

如果你的項目不是 cli 直接生成的，建議認(rèn)真閱讀一波 CommonsChunkPlugin，解決方案就在文檔中