[英]How can I create vendor bundles for each dynamically imported module?
我正在一个具有多个单独页面的基于CMS的网站上工作,并且正在使用常规代码拆分策略在vendor.js
文件之后加载的app.js
文件将网站范围的功能加载到每个页面上。 app.js
是主入口文件,它使用动态导入来加载特定于页面的脚本。 这是我的app.js
的示例:
/**
* "Register for a class" page
*/
if (document.body.classList.contains("page-id-4136")) {
import(/* webpackChunkName: "register-for-a-class" */ './pages/register-for-a-class/main')
}
在这种情况下,“页面/类的注册/main.js”文件页面使用Vue作为依赖项,但这是迄今为止该站点上唯一需要它的页面。 当只在此页面上使用Vue时,我不希望将其捆绑到vendor.js
。 我尝试通过尝试以下操作将Vue本身包括为动态导入:
// pages/register-for-a-class/main.js
import(/* webpackChunkName: "vue" */ 'vue').then(({ default: Vue }) => {
new Vue({
...
})
})
但这给我一个webpack捆绑错误,提示Module parse failed: 'import' and 'export' may only appear at the top level
。 所以我也尝试了这个:
// app.js
/**
* "Register for a class" page
*/
if (document.body.classList.contains("page-id-4136")) {
import(/* webpackChunkName: "vue" */ 'vue').then(({ default: Vue }) => {
import(/* webpackChunkName: "register-for-a-class" */ './pages/register-for-a-class/main')
})
}
只是没有任何改变。 没有创建“ vue.bundle.js”文件,并且自然地,加载页面会创建Vue is not defined
的Vue is not defined
错误。
这就是我真正要问的。 什么是绝对精彩的是,如果我能有自动的pages/register-for-a-class/main.js
只需拨打一个正常的静态导入(例如import Vue from 'vue'
),并已产生的WebPack既register-for-a-class.bundle.js
文件和相应register-for-a-class-vendor.bundle.js
并自动动态导入该供应商捆绑包。 有可能吗
这是我当前的webpack.common.js文件(我正在使用webpack-merge ):
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const devMode = process.env.NODE_ENV === 'development'
module.exports = {
entry: {
app: './assets/src/app.js'
},
resolve: {
alias: {
'~': path.resolve(__dirname, 'assets/src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.(woff2?|ttf|eot|svg)$/,
use: ['url-loader']
}
]
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
externals: {
jquery: 'jQuery'
},
plugins: [
new VueLoaderPlugin()
]
}
我将推荐以下拆分方法。 希望这可以帮助 :)
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV === 'development';
module.exports = {
entry: {
vendor1: ['vendor1', 'vendor2', 'vendor 3'], // all other vendor lists, package.json dependencies
vendor2: ['vue'],
app: './assets/src/app.js'
},
resolve: {
alias: {
'~': path.resolve(__dirname, 'assets/src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.(woff2?|ttf|eot|svg)$/,
use: ['url-loader']
}
]
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor1: {
name: 'vendor1',
test: 'vendor1',
enforce: true
},
vendor2: {
name: 'vendor2',
test: 'vendor2',
enforce: true
}
}
}
},
externals: {
jquery: 'jQuery'
},
plugins: [new VueLoaderPlugin()]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.