javascript - 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 文件中使用它时，它告诉我，那个时刻没有定义。所以，我不明白的是， bundle 是否具有共同的范围？如果没有，那么我如何访问我在另一个包中导出的变量，如果我不能，那么像这里描述的 vendor 包有什么意义 https://webpack.js.org/guides/code-splitting-libraries/ ？

Answer 1

bundle 不共享范围。事实上，webpack 尊重每个模块的范围，就像 Node.js 一样，所以你不能使用来自另一个模块的任何东西，除非你导入它，即使它在同一个包中。

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

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

---

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

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

没有 CommonsChunkPlugin 生成的包(未丑化)是:

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

那是 470 KB，因为它包含包中的整个 moment 源，更糟糕的是，另一个也使用 moment 的包也包含整个源。 vendor 不应该在这里使用它，但考虑另一个需要使用它的包。当您在应用程序中更改某些内容时，用户将不得不重新下载整个 470 KB。

使用CommonsChunkPlugin:

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

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

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

为简洁起见，我省略了文件名中的哈希值，但它们是清除缓存所必需的。有关详细信息，请参阅 Caching .