webpack打包文件过大优化

我是用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' 
    }),
  ]
}
阅读 6.4k
3 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题