Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'compression-webpack-plugin' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
new webpack.optimize.UglifyJsPlugin({
/* eslint-disable camelcase */
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true,
},
compress: {
screw_ie8: true,
},
comments: false,
/* eslint-enable camelcase */
}),
isProd &&
isAnalysis === false &&
new CompressionPlugin({
test: {
// Fake RegExp
test(file) {
return /\.pre\.css$/.test(file) === false && /\.(js|css|svg)$/.test(file) === true;
},
},
deleteOriginalAssets: true,
}),
isProd && new webpack.optimize.ModuleConcatenationPlugin(),
isProd && new webpack.HashedModuleIdsPlugin(),
]),
node: {
fs: "empty",
net: "empty",
tls: "empty",
},
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath,
}),
...middlewarePlugins,
gzipConfig && new CompressionPlugin(gzipConfig),
brotliConfig && new BrotliPlugin(brotliConfig),
new ExpoProgressBarPlugin(),
...reportPlugins,
].filter(Boolean),
module: {
strictExportPresence: false,
rules: [
// Disable require.ensure because it breaks tree shaking.
{ parser: { requireEnsure: false } },
{
oneOf: allLoaders,
},
].filter(Boolean),
},
new webpack.NoErrorsPlugin()
);
}
else if (__PROD__) {
debug('Enable plugins for production (OccurenceOrder, Dedupe, UglifyJS, & GZip).');
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false,
},
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$/,
threshold: 10240,
minRatio: 0.8,
})
);
}
// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
})
);
: null,
// ignore locales imported by momentjs, both sides, requires you to require them explicitly
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// extract css, only client side and prod
!isDev && !isServer
? new ExtractTextPlugin({
filename: 'static/css/[name].[hash:8].css',
allChunks: true,
})
: null,
// compress to gz, only client side assets and prod
!isDev && !isServer
? new CompressionPlugin({
asset: '[path].gz',
algorithm: 'gzip',
})
: null,
// offline plugin , only client side assets and prod mode
!isDev && !isServer && OfflinePlugin != null
? new OfflinePlugin({
AppCache: false,
autoUpdate: true,
caches: {
main: ['**/vendor.*.{css,js}', '**/main.*.{css,js}'],
additional: [':rest:'],
// main: ['**/vendor-*.{css,js}', '**/main-*.{css,js}'],
// additional: ['**/*.{css,js,jpg,jpeg,png,ogg,svg,woff,woff2,ttf}'],
// additional: [':rest:'],
new OptimizeJsPlugin({
sourceMap: true
}),
// extract vendor chunks
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1
}
}),
// manifest chunk, more info in webpack docs
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new CompressionPlugin({
algorithm: 'gzip'
}),
new OfflinePlugin({
caches: {
main: [
'vendor.*.js',
'vendor.*.css',
'manifest.*.js',
'client.*.js',
'assets/icons.*.*'
],
additional: [':externals:'],
optional: [':rest:']
},
externals: [
'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'
__INJECT_HTML__: injectHtml,
__APP_ENV__: JSON.stringify(appEnv),
}),
new FriendlyErrorsWebpackPlugin(),
];
if (isDev) {
plugins.push(new WebpackNotifierPlugin({
excludeWarnings: true,
title: `${process.env.PWD.split('/').pop()}`,
}));
plugins.push(new webpack.HotModuleReplacementPlugin());
} else {
plugins.push(
new webpack.HashedModuleIdsPlugin(),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.jsx?$|\.css$|\.(scss|sass)$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
new ImageminPlugin({
pngquant: { quality: '95-100' },
}),
new BundleAnalyzerPlugin({
analyzerMode:
process.env.NODE_ENV === 'analyze' ? 'server' : 'disabled',
})
);
}
config.plugins.push(
new ExtractTextPlugin({ filename: `${cssNamePattern}.css` }),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
},
mangle: {
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
}),
new CompressionPlugin({
asset: '[path].gz',
test: /\.(css|js)$/,
}),
new CleanWebpackPlugin(outputPath, { allowExternal: true }),
);
if(bundleAnalyze) {
config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}
} else {
config.devServer = devServer;
config.output.publicPath = publicPath;
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
);
}
config: ExpoConfig
): Configuration | DevConfiguration {
const gzipConfig = overrideWithPropertyOrConfig(
config.web?.build?.gzip,
DEFAULT_GZIP_OPTIONS,
true
);
const brotliConfig = enableWithPropertyOrConfig(
config.web?.build?.brotli,
DEFAULT_BROTLI_OPTIONS,
true
);
if (!Array.isArray(webpackConfig.plugins)) webpackConfig.plugins = [];
if (gzipConfig) webpackConfig.plugins.push(new CompressionPlugin(gzipConfig));
if (brotliConfig) webpackConfig.plugins.push(new BrotliPlugin(brotliConfig));
return webpackConfig;
}
},
plugins: removeEmpty([
new webpack.DefinePlugin({
'process.env': {
COVERS_WORKSHEET_ID: JSON.stringify(process.env.COVERS_WORKSHEET_ID),
CURIOSITIES_WORKSHEET_ID: JSON.stringify(process.env.CURIOSITIES_WORKSHEET_ID),
INSTANCE_NAME: process.env.INSTANCE_NAME,
NODE_ENV: process.env.NODE_ENV,
POSITIONS_WORKSHEET_ID: JSON.stringify(process.env.POSITIONS_WORKSHEET_ID),
SHIRTS_WORKSHEET_ID: JSON.stringify(process.env.SHIRTS_WORKSHEET_ID),
SPREADSHEET_ID: JSON.stringify(process.env.SPREADSHEET_ID),
TEMPLATE_NAME: process.env.TEMPLATE_NAME,
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new CompressionPlugin({
algorithm: 'gzip',
asset: '[path].gz[query]',
cache: true,
test: /\.(html|css|js)$/,
}),
new CopyWebpackPlugin([
{
from: resolve(srcPath, 'assets'),
to: 'assets',
},
]),
ifProduction(new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })),
new SimpleProgressWebpackPlugin(),
new CleanWebpackPlugin([resolve(distPath, '*'), resolve(__dirname, '.tmp', '*')]),
new HtmlWebpackPlugin({
filename: 'index.html',
WEBPACK_PRERENDERING: true,
}),
new StaticSiteGeneratorPlugin({
entry: 'prerender',
paths: Object.keys(prerenderConfig.paths),
locals: {
pathStates: prerenderConfig.paths,
},
globals: {
window: {},
...prerenderConfig.globals,
},
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: (input: any, compressionOptions: any, callback: any) =>
gzip(input, compressionOptions, callback),
test: /\.(html)$/,
threshold: 1024,
minRatio: 0.9,
} as any),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.(html)$/,
threshold: 1024,
minRatio: 0.9,
}),
];