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業務代碼