javascript - 使用 Webpack 4 减少和优化具有两个入口点的捆绑包
问题描述
我有两个入口点并使用 Webpack 4,但用于生产的构建大约需要 3-5 分钟,并且为两个入口点创建两个大的vendor
输出 js 文件。看起来我有:
对于一个条目:
main.4b8e36a69d37fde00916.js 1.15 MiB 0 [emitted] [big] main
vendors~main.ebc7e19767bc133dd354.js 5.36 MiB 1 [emitted] [big] vendors~main
第二:
../identityServerModel.cc17842eb2ee86c9a5a7.js 17.2 KiB 0 [emitted] identitySer
../vendors~main.6adcd3c3d6680968397f.js 4.24 MiB 2 [emitted] [big] vendors~main
如何优化它?您有什么建议和解决方法或技巧吗?当我启动我的build
脚本时,我为此入口点运行了两个构建。
包.json:
...
"build": "webpack --colors --config webpack/prod.js && webpack --config webpack/identityServer.js && cpx \"dist/**/*\" ../SomeFolder/Ui --clean",
...
我的网络包:
common.js:
const extractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const path = require('path')
// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
console.log(err)
})
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/main.js',
plugins: [
// TODO remove after deleting *.scss files across app
new extractTextPlugin({
filename: 'bundle.css',
disable: false,
allChunks: true,
}),
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..'),
}),
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
use: 'eslint-loader?{fix:true}',
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'file-loader?name=[name].[ext]',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
// TODO remove extractTextPlugin after delete all .scss in react-components
{
test: /\.scss$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader',
}),
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]',
},
{
test: /\.(png|mp4)$/,
use: 'file-loader',
},
],
},
performance: {hints: false},
optimization: {splitChunks: {chunks: 'all'}},
}
第一入口点配置:
prod.js:
const merge = require('webpack-merge')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const common = require('./common.js')
module.exports = merge(common, {
mode: 'production',
devtool: false,
stats: 'normal',
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new HtmlWebpackPlugin({
template: './src/index.ejs',
hash: true,
}),
],
})
第二个入口点:
身份服务器.js:
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const common = require('./common.js')
const path = require('path')
const templates = {
index: {excludeChunks: ['identityServerModel']},
logout: {
excludeChunks: ['main'],
chunks: ['identityServerModel'],
inject: 'head',
},
error: {
excludeChunks: ['main'],
chunks: ['identityServerModel'],
},
}
const entryHtmlPlugins = Object.keys(templates).map(template => new HtmlWebpackPlugin({
template: `./src/components/loginPage/${template}.ejs`,
filename: `${template}.html`,
hash: true,
...templates[template],
}))
const commonFiltered = {
...common,
}
commonFiltered.plugins = commonFiltered.plugins.filter(plugin => !(plugin instanceof CleanWebpackPlugin))
module.exports = merge(commonFiltered, {
mode: 'production',
devtool: false,
stats: 'normal',
entry: {
identityServerModel: './src/components/loginPage/identityServerModel.js',
main: './src/components/loginPage/login.js',
},
plugins: entryHtmlPlugins,
output: {
filename: '../[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist/login'),
publicPath: '/',
},
})
我有主项目,我将所有供应商捆绑在一起,并且每个条目中的prod.js
服务器页面identetyServer.js
都有类似的供应商(react、redux 和所有这些东西)。对我来说,两个条目的供应商捆绑包看起来相似。
解决方案
有很多选项可以加快 webpack,但首先应该考虑一个:
如果您要从带有extract-text-webpack-plugin
. 如果您打算在 html 中使用link
.
或者,您可以对“增量”样式的 webpack 构建过程执行相同的操作。但恕我直言,“退后一步”是最简单的方法。
推荐阅读
- python - AWS 胶水 python 导入 mysql
- python - 为什么我在 Python 代码错误和 crumb 错误中得到发散收敛测试?
- css - wordpress wp_enqueue_style,样式版本号不行?
- typescript - TypeScript - 枚举与常量枚举的可互换性
- c++ - g++10 恢复 c++20 删除的功能?
- node.js - 使用 casl 创建用户以获得基于角色的权限
- javascript - 最多两个横幅的最小总面积以覆盖 N 个建筑物
- spring - Hibernate 并发多对多关系
- java - 避免在方法级别同步
- python-3.x - 在 win10 上安装 Tensorflow(已安装但在 import tensorflow as tf 时显示错误)