javascript - webpack如何分别打包第三方库和自己写的公用业务逻辑库
怪我咯
怪我咯 2017-04-11 12:38:37
[JavaScript讨论组]

背景

我的项目是一个多页应用,用webpack作为构建工具,目前是用CommonsChunkPlugin(minChunks: 5)把所有require5次以上的模块(这里面既包括第三方库,也包括我自己写的公用业务逻辑模块)都打包到一起,因此基本上每个页面只加载俩js,一个是前面提到的这个打包的js,另外一个就是仅在本页面使用到的entry.js。
以登录页作为例子,每个页面加载的js是这样的:




需求

现在我的需求是,把第三方库和我自己写的公用业务逻辑库分开来打包,这是基于下面的考虑:

  • 第三方库基本不会改动,打包一次就不用动了,对缓存有好处。

  • 把第三方库拉出来后,webpack打包速度可以更快。
    我希望最后达到的效果是:






尝试

我在网上没有搜到这样的例子,只搜得到仅把第三方库独立出来打包的例子(没有考虑到公用业务逻辑库的情况)。

我自己有尝试过用俩CommonsChunkPlugin:

commonsChunkPluginForVendor = new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: '[name].bundle.js',
    minChunks: Infinity,
});

commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: '[name].bundle.js',
    minChunks: 5,
});

这样打包出来的效果是,第三方库的确是独立出来了打包到了vendor.bundle.js里,但是commons.bundle.js里却只有webpack的一些执行代码,并没有把公用业务逻辑库抽取出来,而是分散到各个entry.js里。

请教怎么才能分别打包第三方库和自己写的公用业务逻辑库呢?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(3)
迷茫

可以看看我写的文章,最后一节webpack CommonsChunkPlugin详细教程

PHP中文网

我自己来回答一下最终实践的结果吧:

  • 自己写的公共逻辑用CommonsChunkPlugin:《webpack多页应用架构系列(三):怎么打包公共代码才能避免重复?》。

  • 第三方库用DllPlugin来打包:《webpack多页应用架构系列(十一):预打包Dll,实现webpack音速编译》。

高洛峰

请问最后解决了么?我想在pc端用react 移动端用vue 所以要把vue 和react 分开打~ 现在也不知道该怎么分开

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号