[英]How to reduce webpack bundle in development mode?
我正在尝试为 react/redux 项目创建我自己的 webpack 配置。 配置似乎运行得很好,但是包的大小很大(在开发模式下,我知道如何在生产模式下减少它)
我的package.json
看起来像
"dependencies": {
"react": "15.4.2",
"react-dom": "15.4.2",
"react-hot-loader": "3.0.0-beta.6"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-loader": "6.4.1",
"babel-preset-react": "6.23.0",
"commitizen": "2.9.6",
"cz-conventional-changelog": "2.0.0",
"html-webpack-plugin": "2.28.0",
"webpack": "2.3.1",
"webpack-bundle-analyzer": "^2.3.1",
"webpack-dev-server": "2.4.2"
}
我的 webpack 配置看起来像
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const project = require('./project.config')
const __DEV__ = project.globals.__DEV__;
const __PROD__ = project.globals.__PROD__;
const __TEST__ = project.globals.__TEST__;
const APP_ENTRIES = [project.paths.client('index.js')];
if (__DEV__) {
APP_ENTRIES.unshift(
'react-hot-loader/patch',
`webpack-dev-server/client?http://${project.server_host}:${project.server_port}`,
'webpack/hot/only-dev-server'
)
}
const config = {
devtool: project.compiler_devtool,
entry: APP_ENTRIES,
output: {
path: project.paths.dist(),
filename: `[name].[${project.compiler_hash_type}].js`,
publicPath: project.compiler_public_path,
},
resolve: {
modules: [
project.paths.client(),
'node_modules',
],
},
module: {
rules: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
}],
},
plugins: [
new BundleAnalyzerPlugin(),
new HtmlWebpackPlugin({
template: project.paths.client('index.html'),
hash: false,
filename: 'index.html',
inject: 'body',
}),
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
}
if (__DEV__) {
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin());
}
module.exports = config
现在我在运行webpack-dev-server
时得到了这个输出
如您所见,我的包大于 1.3 Mb,但我只使用了几个库。
我试图使用webpack-bundle-analyser
找出为什么我的包这么大。 这是结果
似乎react
和readct-dom
是最大的库。
有没有办法在开发模式下减少我的包的大小??? 我做错什么了吗 ?
PS:我在webpack-dev-server
选项中设置了compress = true
,但它并没有减少包的大小。
这里有更多关于我如何使用webpack-dev-server
细节
bin/start.js (我使用node bin/start.js
运行它)
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../config/webpack.config');
const project = require('../config/project.config');
function runDevServer() {
const devServer = new WebpackDevServer(webpack(config), {
compress: true,
hot: true,
publicPath: project.compiler_public_path,
stats: project.compiler_stats,
watchOptions: {
ignored: /node_modules/
},
});
// Launch WebpackDevServer.
devServer.listen(project.server_port, project.server_host, (err) => {
if (err) {
console.log('Webpack dev server encountered an error', err);
return reject(err);
}
console.log(`Listening at ${project.server_host}:${project.server_port}`);
});
}
runDevServer()
src/index.js (我的应用程序。 Home
只是一个返回“Hello world”的组件)
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Home from './routes';
const render = () => {
try {
ReactDOM.render(
<AppContainer>
<Home />
</AppContainer>,
document.getElementById('root')
);
} catch (err) {
console.error(err)
}
};
if (module.hot) {
module.hot.accept('./routes', () => render());
}
render()
在开发期间有一个大包是正常的,1.3MB 仍然很小,通常应该可以快速加载。 由于您使用的是 webpack-dev-server,因此每次更改后都不需要重新加载。 如果你使用compress = true
,你的包大小将是相同的,除了当客户端要求它时它会被 gzip 压缩(你应该在网络选项卡中看到 gzip)。 我建议您不要尝试减小开发包的大小,因为它很难调试且刷新速度较慢。 如果您真的想减小大小,则可以仅对库代码进行丑化和缩小。 这是一种非常常见的方法,您基本上将每个库都放在一个名为vendor.js
的文件中,您将对其进行缩小、丑化等。在另一个文件bundle.js
您将拥有您编写的所有代码。 这将显着减少总大小。 但您必须加载 2 个 js 文件。 还积极您可以将树的WebPack 2.摇晃她是有关更多信息树摇晃。 您可以参考这个关于如何单独捆绑供应商脚本的答案,并在此处阅读有关代码拆分的更多信息。 但是请记住,您的开发包将始终具有更大的尺寸,因为它在调试时非常方便。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.