使用vue-cli生成的vendor.js文件太大，有办法减少体积吗？

Question

看到vue-cli的webpack配置，应该是将所有的库打包到了vendor中，引用的库太多时，vendor的体积会很大，有办法控制打包的体积超过一定值时，分成多个文件打包吗？或者通过配置将部分库抽离出来，打包成另外的文件。

下面的代码是vue-cli生成vendor的代码：

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // 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
        )
      },
    }),

Answer 1

对于这一点，正在写一篇文章，予以阐述的：详见这篇文章：http://jeffjade.com/2017/03/1... , 鉴于内容较多，还在写作过程中。以下为现编写的答案：

---

(Update @2018-04-10) | GoogleChromeLabs 团队在 Github 上有建设仓库：Optimize your libraries with webpack，对于如何更好的使用 Webpack，在写代码层面上，给出了很多不错的建议，值得一读，这有助于更进一步的减少打包文件的体积。

---

（Update@17-08-24） | 对于这个问题，有写两篇文章，分别对体积和速度方面优化，予以探究，欢迎一起探讨；

Webpack 打包优化之体积篇
Webpack 打包优化之速度篇

---

首先，在写 Vue 的时候，应该采用懒加载模式，之后生成的包，就会被打入到不同分组的 js，运行时按需加载，详情见：Vue-路由懒加载；这个意义重大！

其次，可利用，webpack.DllReferencePlugin webpack.DllReferencePlugin 将常用不怎么变更的文件，打入一个统一的文件，外链使用。这个主要作用也可用来缩小包构建的时间；这个网上教程蛮多，就不赘述。也可参见这个项目 jade-blog 来配置；这一步即是你通过配置将部分库抽离出来，打包成另外的文件。

再次，可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构，十分牛掰（最新 Vue-cli 带有此配置）；在 package.json 中配置如下命令 npm run analyz，运行即可查看之：

"analyz": "NODE_ENV=production  npm_config_report=true npm run build"

对此可以分析研究，采取办法过滤掉重复的内容等... ... 其他还有诸如开启压缩啦，开启 Gzip 之类等等，来减小包的体积。

赘言：当然也可以从另一个维度来精细解决，即代码角度。非必需库可以不与引用，比如已经退出历史舞台的 JQuery,还有 momont 等。再有就是合理的去写，比如组件复用，合乎时宜的去使用混合诸次等等。

容继续学习，继续更新； Last Modify @2017-03-26。

Answer 2

建议使用 cdn，然后在 webpack 配置中指定 externals

Answer 3

我这里有原因分析和详细解决方案：https://segmentfault.com/a/11...
然后我再简单说一下：一般高复杂度项目都会使用webpack的拆分，实现异步组件，按需加载，这样可以有效提高时间。其次，可以采用vue服务端渲染，这篇文章我也详细的分析了vue浏览器段渲染和服务端渲染的所解决的问题，除了首屏文件太大，加载过慢外，还可以解决seo，浏览器兼容等一系列问题。

Answer 4

Answer 5

vue+vueRouter+axios+vuex+elementUI部分组件才220KB.你使用了多少库达到了700kb

Answer 6

解决了一部分，回来回答下：
思路：

1. 提取不会改动的第三方库，使用script cdn加载；

2. 多次引用的模块，打包到一个文件里：
   增加一个配置：

   new webpack.optimize.CommonsChunkPlugin({
     async: 'vendor2',
     minChunks: (module, count) => (
   count >= 2
     ),
   }),

现在首页加载还是不理想，analzy显示主要在于elementui太大了，这个坑不知道怎么填