webpack中mainifest.js vendor.js app.js 三者的區別

場景：

你們在利用構建工具進行應用最後的打包過程當中，咱們但願作到的是將業務代碼和第三方引用模塊代碼分開打包.

由於第三方引用模塊代碼一般很大，並且在不引入新的模塊以前基本上是不會變更的。因此咱們須要將這部分獨

立打包，並利用瀏覽器的緩存去提升應用程序的首屏加載速度。

 

因此咱們利用CommonsChunkPlugin插件去抽取這些第三方的部分做爲vendor.js獨立打包，由於須要利用到

緩存。因此咱們添加hash值不能在未改變的狀況下更新，不然獨立打包vendor.js就沒有意義了。

 

改變的緣由：

webpack 打包後會在build過程當中產生Runtime的部分（運行時的一部分代碼）會被添加進入vendor.js中，這是根本緣由

module.exports = {

　　　　　　output: {
　　　　　　　　path: config.build.assetsRoot,
　　　　　　　　filename: utils.assetsPath('js/[name].[chunkhash].js'),
　　　　　　　　chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
　　　　　　},

        plugins:[
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest']
            }),
        ]
    ...
}

解決方法和你們說的都差很少，主要就是將Runtime的部分code抽到manifest.js中，我這裏就是說一下爲何這樣作的緣由

至於app.js 就是app.vue或者其它相似vue文件的js業務代碼