Front-end optimization project 01
1. webpack-bundle-analyzer module package file visualization widget
The plug-in is mainly used for file volume size after the project analysis package,
2.
compression-WebPACK-plugin JS file gzip compression plug-in
This plug is mainly used gzip algorithm to further compress js files (compression space ≈70 &)
Existing project configuration:
package.json
// add two dependencies
"
devDependencies": {
"compression-webpack-plugin": "1.1.12", // 压缩
"Webpack-bundle-analyzer": "^ 3.3.2", // Visualization
}
// add instruction execution npm
"scripts": {
"Build: gzip": "cross-env NODE_ENV = production GZIP = true webpack --progress --hide-modules", // initialize the compression and packaging production environment variable
"Analyzer": "cross-env NODE_ENV = production ANALYZER = true webpack --progress --hide-modules", // initialize the production and packaging Visualization Environment Variables
}
webpack.config.js
Imported modules :
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
var CompressionPlugin = require('compression-webpack-plugin')
Module Configuration :
if (process.env.ANALYZER) {// presence present visualization environment ANALYZER
module.exports.plugins = module.exports.plugins.concat(new BundleAnalyzerPlugin())
}
if (process.env.GZIP) {// File Compression exist there are environmental ANALYZER
module.exports.plugins = module.exports.plugins.concat(new CompressionPlugin({
algorithm: 'gzip',
test: /\.js/,
deleteOriginalAssets: true
}))
}
Comment:
webpack3 corresponding compression-webpack-plugin version 1.1.2 only
compression-webpack-plugin version 2.0.0 ^ corresponding webpack4
The morning update said a configuration problem, change the configuration of the main reasons is fear of nginx server side did not open gzip function, if only packaged .gz file, can cause an access exception, so get rid of this property will be packaged two js code , a .js, one is .js.gz, nginx server to read the .js according to the relevant configuration file or .js.gz
.jpg)