javascript - webpack build后生成的app、vendor、manifest三者有何职能不同？

问题描述

问 题

第一次build后生成正式环境文件，然后发现js文件竟然生成了app.jsvendor.jsmanifest.js

问：想请问下这三者在功能上有何侧着、不同吗？另外还有没有再精简、优化的空间

解决方案

题主，你可以通过build设置先不做压缩，看看里面的代码长啥样。

你标签写着vue，从我接触过的vue demo来说吧。 首先一个vue项目，肯定要用到vue的，其次是这个项目页面的js，也就是怎么实例化vue并写出业务来。

如果是传统的jquery开发模式，一个页面至少也是要包含两个js，一个是jquery的，一个是页面业务的。

回到app，vendor，manifest这三者，贴一下之前vue脚手架的webpack配置

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
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })

app.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。

从截图上看也看出，vendor的文件大小最大，因为其包含了vue整一个框架的代码，以及webpack的模块化代码。

至于manifest的话，主要是一些异步加载的实现方法（通过建立script方式动态引入js），内容上包含异步js的文件名和路径。

之前查过一些资料，主要是js的改动会改变异步加载里面的js文件名，频繁的变动，而相对来说vue库之类的代码，实际上只要编译打包一次就够了，如果只是打包成一个vendor的话，经常变动js会导致vendor重复编译，有点浪费，所以把会重复跟随变动的部分抽离出来作为manifest文件。

这是我的个人理解，有问题请指正哈

这篇关于javascript - webpack build后生成的app、vendor、manifest三者有何职能不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！