Shulou(Shulou.com)06/01 Report--

Editor to share with you what are the ways of vue code compression optimization, I hope you will gain something after reading this article, let's discuss it together!

Vue Code Compression Optimization sets productionSourceMap to false

If you do not need the source map for the production environment, you can set it to false to speed up the construction of the production environment.

The .map file does not appear when it is set to false packaging.

Module.exports = {productionSourceMap: false} Code Compression

Install the uglifyjs-webpack-plugin plug-in to remove console.log and debugger from the project

Npm install uglifyjs-webpack-plugin-- saveconst UglifyJsPlugin = require ('uglifyjs-webpack-plugin') / / production environment related configuration if (isProduction) {/ / Code compression config.plugins.push (new UglifyJsPlugin ({uglifyOptions: {/ / production environment remove console and other information compress: {warnings: false, / / if the packaging is incorrect Comment on the line drop_debugger: true,// whether to remove debugger drop_console: true, pure_funcs: ['console.log'] / / remove console}}, sourceMap: false, parallel: true})} Image resource compression

Install the image-webpack-loader plug-in to compress large images to reduce the size of the package

Npm install image-webpack-loader-- save chainWebpack: config = > {/ / = compress the image start= config.module .rule ('images') .use (' image-webpack-loader') .loader ('image-webpack-loader') .options ({bypassOnDebug: true}) .end () / / = compress the picture end=} enable gzip compression

Enable gzip compression to optimize http requests and improve loading speed

Npm install compression-webpack-plugin-- save-devconst CompressionPlugin = require ("compression-webpack-plugin") / / enable gzip compression config.plugins.push (new CompressionPlugin ({algorithm: 'gzip', test: new RegExp ("\\. (" + ["js", "css"] .join ("|") + ") $"), / / match file extension / / threshold: 10240, / / compress data over 10k threshold: 5120, / / compress data over 5k minRatio: Cache: true, / / need to cache deleteOriginalAssets:false / / true to delete source files (not recommended) False does not delete source files})) vuecli3 code compression confusion

Recently, he was abused by the boss of a big company, asking him to confuse the code written in vuecli3 (there is no sensitive information, what confusion.)

The confusion process is now recorded as follows

1. Install "uglifyjs-webpack-plugin"

Cnpm I-- save uglifyjs-webpack-plugin

Students who do not have cnpm installed can use npm

2. Create a file named vue.config.js in the project root directory

3. Introduce uglifyjs-webpack-plugin into vue.config.js

Const UglifyPlugin = require ('uglifyjs-webpack-plugin')

4. Configure uglifyjs-webpack-plugin in vue.config.js

Module.exports = {configureWebpack: (config) = > {if (process.env.NODE_ENV = = 'production') {/ / modify the configuration for the production environment config.mode =' production' / / package each dependent package into a separate js file let optimization = {minimizer: [new UglifyPlugin ({uglifyOptions: {warnings: false) Compress: {drop_console: true, drop_debugger: false, pure_funcs: ['console.log']})} Object.assign (config {optimization})} else {/ / modify the configuration for the development environment config.mode = 'development'}

This is fine. Then you can pack up and try it.

Cnpm run build

If an error is reported, it is estimated that the uglifyjs-webpack-plugin version has been updated again, and the "minimizer" node in the configuration may need to be modified.

After reading this article, I believe you have a certain understanding of "what are the ways to optimize vue code compression?" if you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.