Vue inspect to view the default Webpack configuration information for the current project (important)
Plug-in address: www.webpackjs.com/plugins/
Compression -webpack-plugin Enables Gzip compression
1. The function of compression-webpack-plugin
Effect: Improve the network transmission rate => Optimize the Web page loading time
Files can be pre-gzip compressed with the help of the CompressionWebpackPlugin.
In this way, the server directly reads. Gz files with the same name as the source file, and does not compress them actively, reducing the CPU load and optimizing the server performance.
* Fundamentals
1) When the browser requests resource files, it will automatically bring an Accept-encoding header to tell the server the supported compression Encoding type;
2) Server configuration enable gzip option: When receiving a request for resource files from the client, check the content-encoding format supported by the request header. If the request contains gzip, the resource file is returned after the gzip encoding is performed (Content-encoding: gzip is included in the response header).
3) The browser receives the response and checks whether the request header contains Content-encoding:gzip. If so, decompress the returned resource file and parse the rendering.
2. Use of compression-webpack-plugin project
1. Install compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
Copy the code* NPM address: www.npmjs.com/package/com…
2. Vue.config. js configuration of vuE-cli3
const CompressionWebpackPlugin = require('compression-webpack-plugin'); Module.exports = {// Set some webPack config items and merge configureWebpack with default config items: {plugins: [new CompressionWebpackPlugin({// change the configuration item of 1.x to filename filename: Info => '${info.path}. Gz ${info.query} ', // 10240, / / compression test data of more than 10.24 k: new RegExp (` \ \. (${[' js]. Join (' | ')}) $`), matching filename / / / / test: New RegExp (' (' + [' js', 'CSS']. Join (' | ') + ') $'), minRatio: 0.8, / / compression ratio deleteOriginalAssets: false, / / not to delete the source file]}}})Copy the codeTwo, image-webpack-loader image compression use
1. Image-webpack-loader functions
Using image compression (PNG, JPEG, GIF, SVG, and WEBP) in WebPack can greatly reduce package sizes and is an important optimization point for the front end.
Image-webpack-loader is recommended, as well as img-loader and imagemin-webpack-plugin. In fact, the underlying call excuses are similar.
2. Use image-webpack-loader project
** Install image-webpack-loader
npm install image-webpack-loader --save-dev
Copy the code* NPM address: www.npmjs.com/package/ima…
**2, **Vue-cli3 vue.config.js configuration
Module.exports = {// Go directly to the built-in webpack configuration item chainWebpack: (config) => {config.module. rule('images').use('image-webpack-loader').loader('image-webpack-loader'). .options({ bypassOnDebug: true, }) .end(); }}Copy the code2. Problems encountered
Image-webpack-loader cannot be installed or is stuck. After the installation, the image-webpack-loader is stuck and does not move for half a day.
* Summary problem: package installation problem, NPM download down because of the wall problem, package download is not complete (problem will appear)
3. Solutions
Procedure method 1 :(win operation)
1. If image-webpack-loader has been installed, uninstall it first
npm uninstall image-webpack-loader
Copy the code2. Use CNPM. This step means to install CNPM and set the global Registry as the mirror of Ali
npm install cnpm -g --registry=https://registry.npm.taobao.org
Copy the code3. Install image-webpack-loader using CNPM and you will find it installed quickly
cnpm install --save-dev image-webpack-loader
Copy the codeMethod 2 :(Mac operation)
1. Drop package.json for now. For example: “image-webpack-loader”: “^7.0.1”
Vue. Config. js comments the code
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true,
})
.end();
Copy the code3. After the package is installed successfully, CNPM installs image-webpack-loader and resumes vue. Config. js
sudo cnpm install image-webpack-loader --save-dev
Copy the code3, uglifyjs-webpack-plugin code compression, delete console and annotations
1. Uglifyjs-webpack-plugin
UglifyJsPlugin is used to compress JS files and reduce the size of JS files. It will slow down the compilation of WebPack. It is recommended that you turn it off in development and turn it on in production.
2. Use uglifyjs-Webpack-plugin project
Install uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
Copy the code* NPM address: www.npmjs.com/package/ugl…
2. Vue.config. js configuration of vuE-cli3
const UglifyPlugin = require('uglifyjs-webpack-plugin'); optimization: { minimizer: [ new UglifyPlugin({ uglifyOptions: {// delete comments output:{comments:false}, // delete console True,//console drop_debugger: false, pure_funcs: ['console.log']// Remove console}}})]}Copy the codeConfigure proxy to forward devserver. proxy
1. Function of devServer.proxy
Cross-domain processing. Cross-domain indicates that the url of any protocol, domain name, or port is different from that of the current page.
2. Devserver. proxy project
DevServer: {// match rule open: false, // automatically start browser host: '0.0.0.0', // localhost port: 6060, // port number HTTPS: false, hotOnly: False, // hot update proxy: {'/ API ': {target: "https://www.baidu.cn/", // cross domain url ws: true, // enable WebSocket Secure: ChangeOrigin: true, // // automatically changes the host pathRewrite in the HTTP header: {"^/ API ": "", // Path replacement rule}}}}Copy the code**pathRewrite: If you do not write the proxy, you can change only the proxy domain name. If you write the proxy, you can change the proxy domain name and the following path.
Pack only changed files
Install NPM I webpack -d
const { HashedModuleIdsPlugin } = require('webpack');
configureWebpack: config => {
const plugins = [];
plugins.push(
new HashedModuleIdsPlugin()
)
}
Copy the code6. Enable package log analysis
Install NPM I webpack-bundle-Analyzer -d
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
Copy the codeVii. Complete configuration of vue.config.js architecture (for reference)
const path = require('path'); Const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const CompressionWebpackPlugin = require('compression-webpack-plugin'); Const {HashedModuleIdsPlugin} = require('webpack'); function resolve(dir) { return path.join(__dirname, dir) } const isProduction = process.env.NODE_ENV === 'production'; // CDN preload using const externals = {'vue': 'vue', 'vue-router': 'VueRouter', 'vuex': 'vuex', 'axios': 'axios', "element-ui": "element "} const CDN = {// dev dev: {CSS: [' https://unpkg.com/element-ui/lib/theme-chalk/index.css '], js: []}, / / production environment build: {CSS: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' ], js: [' https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js', 'https://unpkg.com/element-ui/lib/index.js' ] } } module.exports = { lintOnSave: False, // Disable esLint productionSourceMap: false, publicPath: './', outputDir: Process.env.outputdir, // Generate file directory name chainWebpack: config => { config.resolve.alias .set('@', Resolve (' SRC ')) / / compressed picture config. The module. The rule (' images'). The test (/ \. (PNG | jpe? G | | GIF SVG) (\? *)? $/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: // Webpack will ring chunk-vendors to commonChunk by default, So I need to delete webpack configuration config. The optimization. The delete (' splitChunks) config. The plugin (' HTML '). The tap (args = > {the if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) }, configureWebpack: config => { const plugins = []; If (isProduction) {plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // remove comments}, warnings: false, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log']// Remove console}}})) // Server to enable gzip plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip, test: / \. (js) | CSS $/, / / matching filename threshold: 10000, the data of more than 10 k / / compression deleteOriginalAssets: false, / / not to delete the source file minRatio: 0.8 // compression ratio})) // Used to generate hash as module ID based on the relative path of the module, Plugins.push (new HashedModuleIdsPlugin()) // Enable separation js config.optimization = {runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 1000 * 60, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, Name (module) {// exclude node_modules and replace @ with null, considering server compatibility const packageName = module.context.match(/[\\/]node_modules[\\/](.*?) ([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } } }; Config. performance = {hints: 'Warning ', // maxEntrypointSize: 1000 * 500, // The maximum size of the generated file maxAssetSize: 1000 * 1000, function (assetFilename) { return assetFilename.endsWith('.js'); Externals = externals; externals = externals; } return {plugins}}, pluginOptions: {// configure global less' style-resources-loader': {preProcessor: 'less', patterns: [resolve('./ SRC /style/theme. Less ')]}}, devServer: {open: false, // start browser host: '0.0.0.0', // localhost port: // Update proxy: {'^/sso': {target: process.env.vue_app_sso, // override path ws: True, // Enable WebSocket Secure: false, // For HTTPS interfaces, you need to configure this parameter changeOrigin: true}}}}Copy the code