React Js - 如何保持 bundle.min.js 小?
React Js - how to keep bundle.min.js small?
我对 React 和 javascript 开发还很陌生。我习惯了 java 构建工具,所以现在使用 NPM 我对构建工具有了新的认识。我刚刚开始我的项目,我注意到我的缩小、丑化包仍然是 ~275kb,我想知道这如何扩展到大型应用程序。我的原始源代码本身只有 34kb,但我当然必须引入所有这些框架等等。
那么 - 如何在应用程序增长时保持较小的应用程序大小?我很难理解我在网上阅读的内容,因为很多人似乎都在使用 G运行t,但我只是在下面的包上使用 npm start 和 npm 运行 build。
我是否应该以不同的方式管理我的 requires() 以防止重复打包?我不知道从哪里开始...
这是我的 package.json:
{
"name": "someapp",
"version": "0.0.1",
"description": "foo",
"repository": "",
"main": "js/app.js",
"dependencies": {
"classnames": "^2.1.3",
"flux": "^2.0.1",
"jquery": "^2.2.0",
"keymirror": "~0.1.0",
"object-assign": "^1.0.0",
"react": "^0.12.0"
},
"devDependencies": {
"browserify": "^6.2.0",
"envify": "^3.0.0",
"jest-cli": "^0.4.3",
"reactify": "^0.15.2",
"uglify-js": "~2.4.15",
"watchify": "^2.1.1"
},
"scripts": {
"start": "watchify -o js/bundle.js -v -d js/app.js",
"build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
"test": "jest"
},
"author": "Some Guy",
"browserify": {
"transform": [
"reactify",
"envify"
]
},
"jest": {
"rootDir": "./js"
}
}
我使用 Webpack 取得了不错的效果。我在 Optimizing Webpack Prod Build for React + ES6 Apps
中写过这个
这是我的 Webpack 配置:
var webpack = require('webpack');
var path = require('path');
var nodeEnv = process.env.NODE_ENV || 'development';
var isProd = nodeEnv === 'production';
module.exports = {
devtool: isProd ? 'cheap-module-source-map' : 'eval',
context: path.join(__dirname, './client'),
entry: {
jsx: './index.js',
html: './index.html',
vendor: ['react']
},
output: {
path: path.join(__dirname, './static'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader'
]
},
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
root: [
path.resolve('./client')
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
})
],
devServer: {
contentBase: './client',
hot: true
}
};
需要考虑的两个关键点:
devtool: isProd ? 'cheap-module-source-map' : 'eval',
这个将输出最少的源映射,并将为此使用外部文件,这对您的最终包大小有好处。
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
})
],
Uglify - 你可能知道它的作用。结合 process.env
设置将从 React lib 中清除相当多的开发代码。
CommonsChunkPlugin
将允许您捆绑库(或您喜欢的其他块)以分离构建文件。这特别棒,因为它允许您为供应商库设置不同的缓存模式。例如。您可以比业务逻辑文件更积极地缓存它们。
哦,如果你想看看我的 package.json
匹配这个 webpack 配置:
"scripts": {
"start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000",
"build": "NODE_ENV=production webpack --progress --colors"
},
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"file-loader": "^0.8.4",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0",
"webpack-hot-middleware": "^2.2.0"
}
编辑: Tree shaking 是 Webpack 2(目前处于测试阶段)中的一个闪亮的新版本。结合上面的配置,这将是一个杀手级功能,可以显着缩小您的最终包。
编辑 2:Webpack 2 我修改了现有的示例应用程序以使用 Webpack 2 配置。它额外节省了 28%。在此处查看项目:Webpack 2 sample config project
我对 React 和 javascript 开发还很陌生。我习惯了 java 构建工具,所以现在使用 NPM 我对构建工具有了新的认识。我刚刚开始我的项目,我注意到我的缩小、丑化包仍然是 ~275kb,我想知道这如何扩展到大型应用程序。我的原始源代码本身只有 34kb,但我当然必须引入所有这些框架等等。
那么 - 如何在应用程序增长时保持较小的应用程序大小?我很难理解我在网上阅读的内容,因为很多人似乎都在使用 G运行t,但我只是在下面的包上使用 npm start 和 npm 运行 build。
我是否应该以不同的方式管理我的 requires() 以防止重复打包?我不知道从哪里开始...
这是我的 package.json:
{
"name": "someapp",
"version": "0.0.1",
"description": "foo",
"repository": "",
"main": "js/app.js",
"dependencies": {
"classnames": "^2.1.3",
"flux": "^2.0.1",
"jquery": "^2.2.0",
"keymirror": "~0.1.0",
"object-assign": "^1.0.0",
"react": "^0.12.0"
},
"devDependencies": {
"browserify": "^6.2.0",
"envify": "^3.0.0",
"jest-cli": "^0.4.3",
"reactify": "^0.15.2",
"uglify-js": "~2.4.15",
"watchify": "^2.1.1"
},
"scripts": {
"start": "watchify -o js/bundle.js -v -d js/app.js",
"build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
"test": "jest"
},
"author": "Some Guy",
"browserify": {
"transform": [
"reactify",
"envify"
]
},
"jest": {
"rootDir": "./js"
}
}
我使用 Webpack 取得了不错的效果。我在 Optimizing Webpack Prod Build for React + ES6 Apps
中写过这个这是我的 Webpack 配置:
var webpack = require('webpack');
var path = require('path');
var nodeEnv = process.env.NODE_ENV || 'development';
var isProd = nodeEnv === 'production';
module.exports = {
devtool: isProd ? 'cheap-module-source-map' : 'eval',
context: path.join(__dirname, './client'),
entry: {
jsx: './index.js',
html: './index.html',
vendor: ['react']
},
output: {
path: path.join(__dirname, './static'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader'
]
},
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
root: [
path.resolve('./client')
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
})
],
devServer: {
contentBase: './client',
hot: true
}
};
需要考虑的两个关键点:
devtool: isProd ? 'cheap-module-source-map' : 'eval',
这个将输出最少的源映射,并将为此使用外部文件,这对您的最终包大小有好处。
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
})
],
Uglify - 你可能知道它的作用。结合 process.env
设置将从 React lib 中清除相当多的开发代码。
CommonsChunkPlugin
将允许您捆绑库(或您喜欢的其他块)以分离构建文件。这特别棒,因为它允许您为供应商库设置不同的缓存模式。例如。您可以比业务逻辑文件更积极地缓存它们。
哦,如果你想看看我的 package.json
匹配这个 webpack 配置:
"scripts": {
"start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000",
"build": "NODE_ENV=production webpack --progress --colors"
},
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"file-loader": "^0.8.4",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0",
"webpack-hot-middleware": "^2.2.0"
}
编辑: Tree shaking 是 Webpack 2(目前处于测试阶段)中的一个闪亮的新版本。结合上面的配置,这将是一个杀手级功能,可以显着缩小您的最终包。
编辑 2:Webpack 2 我修改了现有的示例应用程序以使用 Webpack 2 配置。它额外节省了 28%。在此处查看项目:Webpack 2 sample config project