#javascript #webpack #webpacker
#javascript #webpack #webpacker
Вопрос:
Я работаю над приложением React, которое использует Webpacker. Наш производственный код не минимизируется, и мне было поручено определить, почему. Я не нахожу ничего в документации, в которой говорится о том, как минимизировать производственный код. Кажется, что он должен быть включен по умолчанию, поэтому я предполагаю, что мы где-то его отключаем, но я не уверен, где.
Это наша конфигурация Webpacker yaml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: amp;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: amp;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);
Что я должен искать, чтобы минимизировать работу для наших производственных сборок? Что-нибудь здесь выделяется как виновник?
Комментарии:
1. Прежде всего — что не минимизируется? js, html, что-то еще, все?
2. Я сказал JS в названии. 🙂
Ответ №1:
В итоге мне пришлось внести всего пару небольших изменений в мой рабочий файл Webpack.
Я изменил это:
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
… к этому:
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
Что привело к использованию производственной сборки React. И я добавил это:
config.mode = 'production';
В результате чего мой JS был уменьшен.
Для хорошей оценки я также заменил UglifyJS на Terser, в результате чего получился файл, который выглядит следующим образом:
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);
Ответ №2:
В моем случае не хватало просто убедиться, что NODE_ENV
переменная среды была установлена production
в моем сценарии развертывания.