1. 安装postCss

npm install postcss-plugin-px2rem@0.8.1

  1. //  配置postcss
  2. const px2rem = require('postcss-plugin-px2rem')
  3. const postcss = px2rem({
  4.   rootValue: 16, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
  5.   exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  6.   // selectorBlackList: [], //要忽略并保留为px的选择器
  7.   // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  8.   // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  9.   mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
  10.   minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
  11. })
  14.   css: {
  15.     loaderOptions: {
  16.       postcss: {
  17.         plugins: [
  18.           postcss // 配置postcss
  19.         ]
  20.       },
  21.       scss: {
  22.         // 全局使用的scss
  23.         prependData: `@import "~@/styles/mixin.scss";`
  24.       }
  25.     }
  26.   },

2. 单线程压缩js代码(速度慢)

“uglifyjs-webpack-plugin”: “^2.2.0”

  1. // 代码压缩
  2. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  4.   configureWebpack: config => {
  5.         // 代码压缩
  6.       config.plugins.push(
  7.         new UglifyJsPlugin({
  8.           uglifyOptions: {
  9.             output: {
  10.               // 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
  11.               beautify: false,
  12.               // 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
  13.               comments: false
  14.             },
  15.             // 生产环境自动删除console
  16.             compress: {
  17.               // warnings: false, // 若打包错误，则注释这行
  18.               drop_debugger: true,
  19.               drop_console: true,
  20.               pure_funcs: ['console.log']
  21.             }
  22.           },
  23.           sourceMap: false,
  24.           parallel: true
  25.         })
  26.       )
  27.   }

3. 多线程js代码压缩（第三方不维护）

“webpack-parallel-uglify-plugin”: “^1.1.4”

  1. // 多线程js压缩
  2. const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
  4.  configureWebpack: config => {
  5.  // JS多线程压缩
  6.     config.plugins.push(
  7.       new ParallelUglifyPlugin({
  8.         cacheDir: '.cache/',
  9.         test: /.js$/,
  10.         uglifyJS: {
  11.           output: {
  12.             beautify: false,
  13.             comments: false
  14.           },
  15.           warnings: false,
  16.           compress: {
  17.             drop_console: true,
  18.             collapse_vars: true,
  19.             reduce_vars: true
  20.           }
  21.         },
  22.         sourceMap: false
  23.       })
  24.     )
  25.  }

4 terser JS多线程压缩(官方维护)

npm i terser-webpack-plugin@1.4.5

  1. //  多线程官方js压缩
  2. const TerserPlugin = require('terser-webpack-plugin')
  3. configureWebpack: config => { 
  4.       config.plugins.push(
  5.         new TerserPlugin({
  6.           terserOptions: {
  7.             ecma: undefined,
  8.             warnings: false,
  9.             parse: {},
  10.             compress: {
  11.               drop_console: true,
  12.               drop_debugger: false,
  13.               pure_funcs: ['console.log'] // 移除console
  14.             }
  15.           }
  16.         })
  17.       )
  18. }

5. 图形化分析压缩体积

“webpack-bundle-analyzer”: “^4.5.0”,

  1. // 实时查看构建分析
  2. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  4.    const analyzer = new BundleAnalyzerPlugin({
  5.    analyzerPort: 9999
  6.    })
  7.  config.plugin('webpack-bundle-analyzer').use(analyzer)

6.0 压缩css代码

npm i optimize-css-assets-webpack-plugin@5.0.4

  1. // optimizeCssPlugin CSS文件压缩插件
  2. const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
  4.         // 压缩css
  5.       config.optimization.minimizer.push(
  6.         new OptimizeCssPlugin({
  7.           assetNameRegExp: /\.css$/g,
  8.           cssProcessor: require('cssnano'),
  9.           cssProcessorOptions: { discardComments: { removeAll: true }},
  10.           canPrint: true
  11.         })
  12.       )

7.0 Gzip

npm i compression-webpack-plugin@5.0.1

  1. // gzip压缩
  2. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  4.       // gzip压缩
  5.       // const productionGzipExtensions = ['html', 'js', 'css']
  6.       config.plugins.push(
  7.         new CompressionWebpackPlugin({
  8.           filename: '[path].gz[query]',
  9.           algorithm: 'gzip',
  10.           test: /\.(js|css|json|txt|ico|svg)(\?.*)?$/i,
  11.           threshold: 10240, // 只有大小大于该值的资源会被处理 10240
  12.           minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  13.           deleteOriginalAssets: false // 删除原文件
  14.         })
  15.       )

配置的全部代码

  1. 'use strict'
  2. const path = require('path')
  3. //  配置postcss
  4. const px2rem = require('postcss-plugin-px2rem')
  5. const postcss = px2rem({
  6.   rootValue: 16, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
  7.   exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  8.   // selectorBlackList: [], //要忽略并保留为px的选择器
  9.   // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  10.   // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  11.   mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
  12.   minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
  13. })
  14. // cdn链接
  15. const cdn = {
  16.   // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  17.   externals: {
  18.     vue: 'Vue',
  19.     vuex: 'Vuex',
  20.     vant: 'vant',
  21.     'vue-router': 'VueRouter',
  22.     axios: 'axios',
  23.     moment: 'moment',
  24.     'vue-clipboard2': 'VueClipboard'
  25.   },
  26.   // cdn的css链接
  27.   css: [
  28.     'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
  29.   ],
  30.   // cdn的js链接
  31.   js: [
  32.     'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
  33.     'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
  34.     'https://unpkg.com/vue-router@3.2.0/dist/vue-router.min.js',
  35.     'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js',
  36.     'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
  37.     'https://cdn.jsdelivr.net/npm/moment@2.18.1/min/moment.min.js',
  38.     'https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.min.js'
  39.   ]
  40. }
  42. // 单线程js代码压缩
  43. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  44. // gzip压缩
  45. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  46. // 多线程js压缩
  47. const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
  48. //  多线程官方js压缩
  49. const TerserPlugin = require('terser-webpack-plugin')
  50. // 实时查看构建分析
  51. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  53. // optimizeCssPlugin CSS文件压缩插件
  54. const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
  56. function resolve(dir) {
  57.   return path.join(__dirname, dir)
  58. }
  59. const isProduction = process.env.NODE_ENV === 'production'
  60. // const name = defaultSettings.title || 'vue Admin Template' // page title
  62. const port = process.env.port || process.env.npm_config_port || 9528 // dev port
  64. module.exports = {
  66.   publicPath: process.env.NODE_ENV === 'production'
  67.     ? '/production-sub-path/'
  68.     : '/',
  69.   outputDir: 'dist',
  70.   assetsDir: 'static',
  71.   lintOnSave: process.env.NODE_ENV === 'development',
  72.   productionSourceMap: false,
  73.   devServer: {
  74.     open: true,
  75.     host: '0.0.0.0', // localhost
  76.     port: port,
  77.     proxy: {
  78.       // 写你的接口
  79.       [process.env.VUE_APP_BASE_API]: {
  80.         // target: `http://localhost:8081/ipamPortal`, //本机IP
  81.         target: `http://0.0.0.0:8080/zoneportal/`, // 内网IP
  82.         // target: `http://0.0.0.0:8080/zoneportal/`, // 外网
  83.         changeOrigin: true,
  84.         pathRewrite: {
  85.           ['^' + process.env.VUE_APP_BASE_API]: ''
  86.         }
  87.       }
  88.     },
  89.     overlay: { // 设置让浏览器 overlay 同时显示警告和错误
  90.       warnings: false,
  91.       errors: true
  92.     },
  93.     before: require('./mock/mock-server.js')
  94.   },
  96.   css: {
  97.     loaderOptions: {
  98.       postcss: {
  99.         plugins: [
  100.           postcss // 配置postcss
  101.         ]
  102.       },
  103.       scss: {
  104.         // 全局使用的scss
  105.         prependData: `@import "~@/styles/mixin.scss";`
  106.       }
  107.     }
  108.   },
  110.   configureWebpack: config => {
  111.     // 生产环境
  112.     if (isProduction) {
  113.       // 为生产环境修改配置...
  114.       config.mode = 'production'
  115.       // 用cdn方式引入，则构建时要忽略相关资源
  116.       config.externals = cdn.externals
  118.       config.output.filename = `js/[name].[chunkhash:8].js`
  119.       config.output.chunkFilename = `js/[name].[chunkhash:8].js`
  121.       config.plugins.push(
  122.         new UglifyJsPlugin({
  123.           uglifyOptions: {
  124.             output: {
  125.             // 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
  126.               beautify: false,
  127.               // 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
  128.               comments: false
  129.             },
  130.             // 生产环境自动删除console
  131.             compress: {
  132.             // warnings: false, // 若打包错误，则注释这行
  133.               drop_debugger: true,
  134.               drop_console: true,
  135.               pure_funcs: ['console.log']
  136.             }
  137.           },
  138.           sourceMap: false,
  139.           parallel: true
  140.         }))
  141.       // gzip压缩
  142.       // const productionGzipExtensions = ['html', 'js', 'css']
  143.       config.plugins.push(
  144.         new CompressionWebpackPlugin({
  145.           filename: '[path].gz[query]',
  146.           algorithm: 'gzip',
  147.           test: /\.(js|css|json|txt|ico|svg)(\?.*)?$/i,
  148.           threshold: 10240, // 只有大小大于该值的资源会被处理 10240
  149.           minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  150.           deleteOriginalAssets: false // 删除原文件
  151.         })
  152.       )
  153.       // JS多线程压缩---缓存形式
  154.       config.plugins.push(
  155.         new ParallelUglifyPlugin({
  156.           cacheDir: '.cache/',
  157.           test: /.js$/,
  158.           uglifyJS: {
  159.             output: {
  160.               beautify: false,
  161.               comments: false
  162.             },
  163.             warnings: false,
  164.             compress: {
  165.               drop_console: true,
  166.               collapse_vars: true,
  167.               reduce_vars: true
  168.             }
  169.           },
  170.           sourceMap: false
  171.         })
  172.       )
  173.       // 压缩css
  174.       config.plugins.push(
  175.         new OptimizeCssPlugin({
  176.           assetNameRegExp: /\.css$/g,
  177.           cssProcessor: require('cssnano'),
  178.           cssProcessorOptions: { discardComments: { removeAll: true }},
  179.           canPrint: true
  180.         })
  181.       )
  183.       // 多线程压缩js
  184.       config.plugins.push(
  185.         new TerserPlugin({
  186.           test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
  187.           parallel: true, // 使用多进程并发运行
  188.           terserOptions: {
  189.             output: { comments: false },
  190.             ecma: undefined,
  191.             warnings: false,
  192.             parse: {},
  193.             extractComments: false, // 将注释剥离到单独的文件中
  194.             compress: {
  195.               drop_console: true,
  196.               drop_debugger: false,
  197.               pure_funcs: ['console.log'] // 移除console
  198.             }
  199.           }
  200.         })
  201.       )
  202.     }
  204.     // 取消webpack警告的性能提示
  205.     config.performance = {
  206.       hints: 'warning',
  207.       // 入口起点的最大体积
  208.       maxEntrypointSize: 10000 * 1000,
  209.       // 生成文件的最大体积
  210.       maxAssetSize: 30000 * 1000,
  211.       // 只给出 js 文件的性能提示
  212.       assetFilter: function(assetFilename) {
  213.         return assetFilename.endsWith('.js')
  214.       }
  215.     }
  216.   },
  217.   chainWebpack(config) {
  218.     // 添加别名
  219.     config.resolve.alias
  220.       .set('@', resolve('src'))
  221.       .set('assets', resolve('src/assets'))
  222.       .set('api', resolve('src/api'))
  223.       .set('views', resolve('src/views'))
  224.       .set('components', resolve('src/components'))
  226.     // 压缩图片
  227.     const imagesRule = config.module.rule('images')
  228.     imagesRule.uses.clear()
  229.     imagesRule.use('file-loader')
  230.       .loader('url-loader')
  231.       .options({
  232.         limit: 10240,
  233.         fallback: {
  234.           loader: 'file-loader',
  235.           options: {
  236.             outputPath: 'static/images'
  237.           }
  238.         }
  239.       })
  241.     // set svg-sprite-loader
  242.     config.module
  243.       .rule('svg')
  244.       .exclude.add(resolve('src/icons'))
  245.       .end()
  246.     config.module
  247.       .rule('icons')
  248.       .test(/\.svg$/)
  249.       .include.add(resolve('src/icons'))
  250.       .end()
  251.       .use('svg-sprite-loader')
  252.       .loader('svg-sprite-loader')
  253.       .options({
  254.         symbolId: 'icon-[name]'
  255.       })
  256.       .end()
  258.     config
  259.       .when(process.env.NODE_ENV !== 'development',
  260.         config => {
  261.           config.plugins.delete('preload')
  262.           config.plugins.delete('prefetch')
  264.           const analyzer = new BundleAnalyzerPlugin({
  265.             analyzerPort: 9999
  266.           })
  267.           config.plugin('webpack-bundle-analyzer').use(analyzer).end()
  269.           // csshansh
  270.           config.plugin('extract-css').tap(args => [{
  271.             filename: `css/[name].[contenthash:8].css`,
  272.             chunkFilename: `css/[name].[contenthash:8].css`
  273.           }])
  275.           // ============注入cdn start============
  276.           config.plugin('html').tap(args => {
  277.             // 生产环境或本地需要cdn时，才注入cdn
  278.             args[0].cdn = cdn
  279.             return args
  280.           })
  282.           config
  283.             .plugin('ScriptExtHtmlWebpackPlugin')
  284.             .after('html')
  285.             .use('script-ext-html-webpack-plugin', [{
  286.               inline: /runtime\..*\.js$/
  287.             }])
  288.             .end()
  290.           config
  291.             .optimization.splitChunks({
  292.               chunks: 'all',
  293.               maxInitialRequests: Infinity,
  294.               minSize: 20000, // 依赖包超过20000bit将被单独打包
  295.               cacheGroups: {
  296.                 vendor: {
  297.                   test: /[\\/]node_modules[\\/]/,
  298.                   name(module) {
  299.                     // get the name. E.g. node_modules/packageName/not/this/part.js
  300.                     // or node_modules/packageName
  301.                     const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
  302.                     // npm package names are URL-safe, but some servers don't like @ symbols
  303.                     return `npm.${packageName.replace('@', '')}`
  304.                   }
  305.                 }
  306.               }
  307.             })
  308.           config.optimization.minimize(true)
  309.           config.optimization.runtimeChunk('single')
  310.         }
  311.       )
  312.   }
  313. }