Webpack代码拆分

Question

我试图用webpack设置我的项目,我读过有关代码分裂的内容,我正在尝试制作两个单独的包,一个用于实际的应用程序代码,另一个用于库和框架.所以我的webpack配置如下所示:

entry: {
    app: './app/index.js',
    vendor: './app/vendor.js'
},
output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'public/js')
},

watch: true,

module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            use: 'css-loader'
        })
    }]
},

plugins: [
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    })
]

在我的vendor.js包中我只有一行:

 import moment from 'moment';

当我尝试在我的app.js文件中使用它时它告诉我,那个时刻没有定义.那么,我没有得到的东西,捆绑是否有共同的范围？如果没有,那么我怎样才能访问我在另一个捆绑包中导出的变量,如果我不能,那么甚至是如何在这里描述的供应商捆绑点https://webpack.js.org/guides/code -splitting-libraries /？

Answer 1

捆绑包不共享范围.实际上webpack尊重每个模块的范围,就像Node.js一样,所以你不能使用其他模块中的任何东西,除非你导入它,即使它在同一个包中.

您需要导入moment您正在使用它的每个模块.这并不意味着您多次包含其源代码.Webpack包含一次源代码,每次导入都会引用它.

CommonsChunkPlugin在这种情况下,代码拆分只是将源放入供应商捆绑包中,并且捆绑包中的每个导入都将引用供应商捆绑包.这意味着您不会将供应商依赖项与您的应用程序包一起发布,因此浏览器可以缓存供应商捆绑包.当您在不更改供应商捆绑包的情况下发布应用程序的新版本时,浏览器只需下载应用程序包,因为它已具有正确的供应商捆绑包.

让我们考虑这个非常简短的示例应用程序:

import moment from 'moment';
console.log(moment().format());

如果没有CommonsChunkPlugin得到的捆绑(不是uglified)是:

vendor.js  470 kB       0  [emitted]  [big]  vendor
   app.js  470 kB       1  [emitted]  [big]  app

那是470 KB,因为它包含了moment捆绑包中的整个源代码,更糟糕的是,另一个也使用的捆绑包也moment包含整个源代码.供应商不应该在这里使用它,但想到另一个需要使用它的捆绑包.当您在应用程序中更改某些内容时,用户必须再次下载整个470 KB.

随着CommonsChunkPlugin:

   app.js  504 bytes       0  [emitted]         app
vendor.js     473 kB       1  [emitted]  [big]  vendor

现在应用程序下降到504字节.当您更改应用程序时,用户只需下载此小包(假设vendor.js已经缓存).这也意味着使用的任何其他bundle也moment将引用vendor.js而不是在bundle中包含源.

大小vendor.js略有增加,因为webpack需要一些额外的代码来处理来自另一个bundle的导入.这也需要在vendor.js之前加载app.js.

为简洁起见,我省略了文件名中的哈希值,但它们将被用于缓存清除.有关更多信息,请参阅缓存.