我正在开发一个使用Webpacker的React应用程序。我们的生产代码没有被缩小，我的任务是确定原因。我在文档中找不到任何关于如何缩小生产代码的内容。它似乎应该默认打开，所以我猜我们在某个地方禁用了它，但我不确定在哪里。
这是我们的Webpacker yaml配置：
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: true
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .jsx
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: false
# Verifies that versions and hashed value of the package contents in the project's package.json
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
http: true
host: webpacker
port: 3035
public: https://webpacker.local.website.com:443
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
poll: 1000
aggregate_timeout: 100
test:
<<: *default
deployed: &deployed
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
production:
<<: *deployed
staging:
<<: *deployed
…和我们的生产Webpack文件：
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const environment = require('./environment');
var ManifestPlugin = require('webpack-manifest-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = environment.toWebpackConfig();
config.plugins.prepend = (new ManifestPlugin());
config.optimization = {
minimizer: [new UglifyJsPlugin({
parallel: 4,
})],
}
module.exports = smp.wrap(config);
我应该寻找什么来让缩小为我们的生产构建工作？这里有什么突出的罪魁祸首吗？
我最终不得不对我的生产Webpack文件进行一些小的编辑。
我改了这个：
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
…到此：
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
这导致React的生产构建被使用。我添加了这个：
config.mode = 'production';
这导致我的JS被缩小了。
为了更好地衡量，我还用Terser替换了UglifyJS，最后得到了一个看起来像这样的文件：
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
const ManifestPlugin = require('webpack-manifest-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const environment = require('./environment');
const config = environment.toWebpackConfig();
config.plugins.prepend = (new ManifestPlugin());
config.mode = 'production';
config.optimization = {
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
],
};
module.exports = smp.wrap(config);
在我的案例中，简单地确保部署脚本中的NODE_ENV环境变量设置为production是缺失的部分。