vue-cli webpack打包后的文件为什么这么大？

Question

我用vue-router懒加载，为什么打包后的文件有的这么大，比如这2给2.js*里面这是包含了其它js？怎么分割它们

以上是用webpack-bundle-analyzer 分析出来的图，请帮我看看

Answer 1

使用 webpack-bundle-analyzer 这个工具分析一下依赖关系，看看具体是引用了那些模块导致的体积过大。然后针对性的进行 Code Splitting 。比如我之前遇到的这个问题，是因为按需加载的页面中重复引用了大量的组件库的模块。可以参考我的这篇文章：https://saekiraku.github.io/a...

Answer 2

看一下你的webpack配置项devtool是怎么配的

Answer 3

能用cdn的就用cdn代替吧，element ，vue等都可以，
在 index.html里加上cdn，
在webpack.base.conf.js里配置一下

 externals: {
    vue: 'Vue',
    'element': 'element-ui'
  },

Answer 4

只要是把公共代码也重复打包到组件里了吧

Answer 5

在下正好使用过xlsx.js， 我就来说下吧。

这个库并不是要在页面初始化就加载的，因此完全可以将其拆出来，这样包的大小会小很多。

xlsx.js文件非常大！

至于怎么拆出来，有两种办法：

1. 使用webpack external
2. 代码中直接使用window.xlsx 来使用（要保证使用的时候代码已经加载完毕）