Vue-cli 单独的js文件如何避免重复打包

Question

用了一个腾讯的cos上传组件，还挺大的

我看到vue-cli这里用commonschunkplugin把node_module中的依赖打包进了vendor中

但单独引用的cos js文件依然存在于多个引用此文件的chunk中
我是这样引用的

如何让这个文件只打包一次呢？

Answer 1

正如你说的 commonschunkplugin把node_module中的依赖打包进了vendor中，但实际中如果 node_module 中的某个包很小或者使用次数很少的话，还是倾向于跟使用这个包的代码打包到一起。

我一般声明 2 个 commonschunkplugin，手动管理公共依赖。

entry: {
    vendor: ['vue', 'vuex', 'vue-router', 'vue-i18n', 'axios'],
    app: './src/main.js',
},

// 打包 entry 中的公共依赖
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor'
}),
// 打包依赖超过 3 次的库
new webpack.optimize.CommonsChunkPlugin({
    async: 'min',
    minChunks: 3
}),
new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor']
}),

可以看看这篇文章：https://zhuanlan.zhihu.com/p/...