关于vue单页应用的打包生成js文件问题

Question

使用vue-cil来打包vue单页应用，使用路由懒加载。生成js文件结构如下图:

vendor文件要144k，因为用了一些vue的插件，这个不用深入探究，但是懒加载的每个页面的js，可以看到红色箭头标的区域，这块都一样的，而且通用的组件footer和header也每个js都会有，这些代码能不能统一放在一个文件里面呢？通用组件和node_modules怎么去重？

Answer 1

用webpack的chunk，提取你要独立出来的模块入口

Answer 2

方法1:

举个例子:

{
  entry: {
    // 为红色区域的模块
    vendor: ['react']
  },
  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}

方法2:

或者通过cdn的方式加载

{
  externals: {
    // 为红色区域的模块
    'react': 'React'
  }
}

<script src="//cdn.com/react/{version}/react.min.js"></script>