webpack打包文件过大优化

Question

我是用vue开发单页面的，做了按需记载，现在有a、b、c、3个页面里面的组件都引用了echarts库，3个文件打包出来都有300k左右的大小，是不是每个页面都把echarts单独打包进去了，有没有办法分离优化一下，这3个页面引用1个echarts，
我已经把vue和vue-router单独出去了,但是这个是必加载的，我用的这个echarts是在进入某个页面才需要下载。
下面是我的代码

module.exports = {
  entry: {
    main:'./src/main.js',
    vendor: ["vue",'vue-router']
  },
  output: {
    path: '',
    publicPath:'',
    chunkFilename:'js/[name].[chunkhash:5].chunk.js',
    filename: 'js/[name].js'
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.bundle.js' 
    }),
  ]
}

Answer 1

可以看下这篇文章https://segmentfault.com/a/11...，使用CommonsChunkPlugin来抽出来，或者https://segmentfault.com/a/11...这篇文章，使用dllPlugin来抽离

Answer 2

把 echarts 、vue 公共库放在 vendors 里面，设置多入口。

Answer 3

把 Vue 打到 venders 或者设置 webpack 的 externals 来直接引用 cdn 上的 Vue，然后用 import('echarts') 来异步加载 echarts（会单独打包），或者也用 externals。