use vue-cli3 Built vue There is no project
productionGZip Configured , You need to install the plug-in compression-webpack-plugin And in vue.config.js In order to optimize the performance of the project
<>1, Install plug-ins ：compression-webpack-plugin
npm i -D compression-webpack-plugin
<>2, stay vue.config.js Configuration in file compression-webpack-plugin
const compressionWebpackPlugin = require('compression-webpack-plugin'); // Introduction of plug-ins
const productionGZipExtensions = ['js', 'css']; // Compressed file types module.exports = {
// Simple configuration configureWebpack: { plugins: [ new compressionWebpackPlugin({ //[file]
Will be replaced with the original resource .[path] Will be replaced with the path of the original resource , [query] Will be replaced with the query string . The default value is "[path].gz[query]". asset
: '[path].gz[query]', // Tips [email protected] In my words asset Change to filename
// It could be function(buf, callback) Or string . For Strings zlib The algorithm of ( perhaps zopfli The algorithm of ). The default value is
"gzip". algorithm: 'gzip', // All resources that match the regularization are processed . The default is all resources . test: new RegExp('\\.(' +
productionGzipExtensions.join('|') + ')$'), // Only resources larger than this value will be processed . The unit is bytes. The default value is 0.
threshold: 10240, // Only resources with a compression ratio less than this value are processed . The default value is 0.8. minRatio: 0.8 }) ] }, // Complex configuration
/*configureWebpack: config => { if(process.env.NOVE_ENV === 'production'){
config.push( new compressionWebpackPlugin({ asset: '[path].gz[query]', //
Tips [email protected] In my words asset Change to filename algorithm: 'gzip', test:
new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold:
10240, minRatio: 0.8 }) ) } }else{} */ }
<>3, use compression-webpack-plugin Solutions to errors in post packaged projects ：
① If [email protected] In my words , Just take it vue.config.js About
compression-webpack-plugin to configure asset Change to filename ② If you are prompted that some properties cannot be found during the build process , Then you can put the
package.lock.json and node_modules delete , And put package.json About
compression-webpack-plugin Version down , as ：1.1.12, And then, again npm install and npm run build
Technology