webpack生产版bundle.js文件大小为10mb

Question

我正在开发这个react应用程序，当我构建项目时，bundle.js文件是10mb，因此部署后加载内容需要时间。

这是代码：https://github.com/sef-global/scholarx-frontend

这是我的webpack配置文件：

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require('webpack');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
mode: 'development',
module: {
rules: [
{
test: /.(js|jsx|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env'] },
},
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
],
},
{
test: /.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: { javascriptEnabled: true },
},
},
],
},
{
test: /.(png|jpe?g|gif)$/i,
use: [{ loader: 'file-loader' }],
},
],
},
resolve: { extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
historyApiFallback: true,
open: true,
hotOnly: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.png',
}),
],
};

Answer 1

我假设对于生产构建，您使用；构建"；来自packages.json的命令，状态为：

"build": "webpack",

这将触发CCD_ 3"；建筑物；当然，但在您的webpack配置中，mode设置为development，因此它将以开发模式构建。

你想做的是：

"build": "webpack --mode production",

--mode参数将覆盖webpack.config中的内容。