Dan*_*iel 21 javascript bundle webpack code-splitting
使用具有以下配置的split chunks插件:
{
entry: {
entry1: [entry1.js],
entry2: [entry2.js],
entry3: [entry3.js],
...
}
optimization: {
splitChunks: {
chunks: "all"
}
}
}
代码将完美地分为:
vendors-entry1-entry2-entry3.js // common for all
vendors-entry1-entry3.js // vendors only required by both entry1, entry3
entry1-entry2.js // common code of entry1 and entry2
entry1.js // unique entry's code
entry2.js
entry3.js
问题是,我现在如何在我的html中使用每个条目的特定供应商(或者在我的特定情况下使用ejs)？
使用HtmlWebpackPlugin建议只需创建一个index.html来加载上述所有内容,尽管用例很明显:
渲染entry1页面时 - 加载:
vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js
渲染entry2页面时 - 加载:
vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js
等等..
小智 10
HtmlWebpackPlugin的第4版(现在是alpha)包括所有条目自动生成的块.所以只是设置chunks: 'entry1'应该工作:
new HtmlWebpackPlugin({
template: 'entry1.ejs',
filename: 'entry1.html',
chunks: ['entry1']
}),
...并导致在html文件中注入所有依赖的块:
<script src="/vendors-entry1-entry2-entry3.js">
<script src="/vendors-entry1-entry3.js">
<script src="/entry1-entry2.js">
<script src="/entry1.js">
你可以安装它
npm install --save-dev html-webpack-plugin@next
我遇到了类似的问题，并且使用我在这里找到的配置设置取得了一些小小的成功。不确定它是否适用于您的特定用例，但我想我会分享。
webpack 配置中的优化哈希如下所示：
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2,
minSize: 0
}
}
},
occurrenceOrder: true
},
因此使用这些入口点：
entry: {
app: './src/app.js',
home: './src/home.js',
product: './src/product.js'
}
这是我的 HtmlWebpackPlugin 设置：
// base template common to all pages
new HtmlWebpackPlugin({
hash: true,
inject: true,
template: './src/jinja-templates/base.html.j2',
filename: `${templates}/base.html.j2`,
chunks: ['commons', 'app']
}),
// JUST the homepage
new HtmlWebpackPlugin({
hash: true,
inject: true,
template: './src/jinja-templates/index.html.j2',
filename: `${templates}/index.html.j2`,
chunks: ['home']
}),
// JUST the product template
new HtmlWebpackPlugin({
hash: true,
inject: true,
template: './src/jinja-templates/product.html.j2',
filename: `${templates}/product.html.j2`,
chunks: ['product']
}),
我成功地将“commons”和“app”块添加到所有页面，并且在主页上添加了“home”块（仅），在产品页面上添加了“product”块（仅）。以下是“主页”页面的来源示例：
<body>
...
<script type="text/javascript" src="/static/commons.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
<script type="text/javascript" src="/static/app.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
<script type="text/javascript" src="/static/home.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
</body>
我不知道是否/如何可以使用此设置拆分供应商模块。我认为这是可能的，但如果是这样，webpack 精英的秘密阴谋集团正在妥善保管这些信息：P
但考虑到它已经将代码分割成几个非常小的块，我不确定它是否有必要（无论如何对我来说）。