30

看到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
        )
      },
    }),
2017-03-26 提问
6 个回答
29

已采纳

对于这一点,正在写一篇文章,予以阐述的:详见这篇文章: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。

2

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

3

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

bootcdn 里去找你要得文件

NANA · 2018年04月21日

展开评论
0

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

0

clipboard.png

1
回复 UndeFined

这个怎么解决,我也提示了vue-preview报错

King · 2017年05月25日

展开评论
0

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

0

解决了一部分,回来回答下:
思路:

  1. 提取不会改动的第三方库,使用script cdn加载;
  2. 多次引用的模块,打包到一个文件里:
    增加一个配置:

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

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

撰写答案

推广链接