• 售前

  • 售后

热门帖子
入门百科

vue.config.js打包优化配置

[复制链接]
水果甜蜜蜜潮 显示全部楼层 发表于 2021-10-26 13:52:17 |阅读模式 打印 上一主题 下一主题
百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身履历了,有需要的可以参考下,先上结果图,以免你们以为我吹牛逼,嘻嘻
优化方向
1.图片资源压缩
2.将 productionSourceMap 设为 false,map不进行天生
3.cdn设置(可选)
4.代码压缩
5.公共代码抽离(个人感觉没啥用)
未优化之前的 //感觉太大了 抬它


优化之后的

  1. 废话不多说了,上代码是重点
  2. 这些是必要的下载
  3. /*cnpm install image-webpack-loader --save-dev
  4. cnpm install compression-webpack-plugin --save-dev
  5. cnpm install uglifyjs-webpack-plugin --save-dev */
复制代码
  1. const path = require('path');
  2. // gzip压缩
  3. const CompressionPlugin = require('compression-webpack-plugin')
  4. //监控日志
  5. const SentryCliPlugin = require('@sentry/webpack-plugin');
  6. // 代码压缩
  7. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  8. const Version = new Date().getTime();
  9. function resolve(dir) {
  10.   return path.join(__dirname, dir)
  11. }
  12. const cdn = {
  13.   js: [
  14.     // vue必须在第一个
  15.     'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
  16.     'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
  17.     'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
  18.     'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
  19.     'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
  20.     'https://cdn.jsdelivr.net/npm/vant@2.5.4/lib/vant.min.js'
  21.   ]
  22. }
  23. module.exports = {
  24.   //部署应用包时的基本 URL
  25.   publicPath: './',
  26.   //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  27.   outputDir: 'wx_vue',
  28.   //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  29.   assetsDir: './' + Version + '/assets',
  30.   // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  31.   lintOnSave: false,
  32.   //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  33.   runtimeCompiler: true,
  34.   // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
  35.   productionSourceMap: false,
  36.   /** 去掉hash */
  37.   filenameHashing: true,
  38.   // pages: {
  39.   //   index: {
  40.   //           entry: 'src/main.js',
  41.   //     template: 'public/index.html',
  42.   //     filename: 'index.html'
  43.   //   }
  44.   // },
  45.   configureWebpack: config => {
  46.     if (process.env.NODE_ENV === 'production') {
  47.       // 为生产环境修改配置...
  48.       config.mode = 'production'
  49.       config.devtool = "source-map";
  50.     } else {
  51.       // 为开发环境修改配置...
  52.       config.mode = 'development'
  53.     }
  54.     /** 删除懒加载模块的 prefetch preload,降低带宽压力(使用在移动端) */
  55.     config.plugins.delete("prefetch").delete("preload")
  56.     config.optimization.minimize(true)
  57.     // gzip压缩
  58.     //              config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
  59.     //        {
  60.     //                filename: '[path].gz[query]',
  61.     //                algorithm: 'gzip',
  62.     //          test: /\.js$|\.html$|\.css/, //匹配文件名
  63.     //          threshold: 10240, //超过10k进行压缩
  64.     //          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  65.     //          deleteOriginalAssets: false //是否删除源文件
  66.     //        }
  67.     //      ])
  68.     config.plugins.push(
  69.       new CompressionPlugin({
  70.         filename: '[path].gz[query]',
  71.         algorithm: 'gzip',
  72.         test: /\.js$|\.html$|\.css/,
  73.         threshold: 10240, // 只有大小大于该值的资源会被处理 10240
  74.         minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  75.         deleteOriginalAssets: false // 删除原文件
  76.       })
  77.     )
  78.     // 公共代码抽离
  79.     config.optimization = {
  80.       splitChunks: {
  81.         cacheGroups: {
  82.           vendor: {
  83.             chunks: 'all',
  84.             test: /node_modules/,
  85.             name: 'vendor',
  86.             minChunks: 1,
  87.             maxInitialRequests: 5,
  88.             minSize: 0,
  89.             priority: 100
  90.           },
  91.           common: {
  92.             chunks: 'all',
  93.             test: /[\\/]src[\\/]js[\\/]/,
  94.             name: 'common',
  95.             minChunks: 2,
  96.             maxInitialRequests: 5,
  97.             minSize: 0,
  98.             priority: 60
  99.           },
  100.           styles: {
  101.             name: 'styles',
  102.             test: /\.(sa|sc|c)ss$/,
  103.             chunks: 'all',
  104.             enforce: true
  105.           },
  106.           runtimeChunk: {
  107.             name: 'manifest'
  108.           }
  109.         }
  110.       }
  111.     }
  112.   },
  113.   configureWebpack: {
  114.     resolve: {
  115.       alias: {
  116.         'vue$': 'vue/dist/vue.esm.js',
  117.         '@': resolve('src'),
  118.         '@c': path.resolve(__dirname, './src/components'),
  119.         'assets': path.resolve(__dirname, '../src/assets')
  120.       }
  121.     },
  122.     externals: {
  123.       'vue': 'Vue',
  124.       'vuex': 'Vuex',
  125.       'vue-router': 'VueRouter',
  126.       'axios': 'axios',
  127.       'qs': 'Qs',
  128.       'vant': 'Vant'
  129.       //                          'weixin-js-sdk':'weixin-js-sdk',
  130.       //                          'clipboard':'clipboard',
  131.       //                          'qrcodejs2':'qrcodejs2',
  132.       //                          'js-md5':'js-md5'
  133.     },
  134.     optimization: {
  135.       minimizer: [
  136.         new UglifyJsPlugin({
  137.           uglifyOptions: {
  138.             output: { // 删除注释
  139.               comments: false
  140.             },
  141.             //生产环境自动删除console
  142.             compress: {
  143.               //warnings: false, // 若打包错误,则注释这行
  144.               drop_debugger: true,  //清除 debugger 语句
  145.               drop_console: true,   //清除console语句
  146.               pure_funcs: ['console.log']
  147.             }
  148.           },
  149.           sourceMap: false,
  150.           parallel: true
  151.         })
  152.       ]
  153.     }
  154.   },
  155.   // css相关配置
  156.   css: {
  157.     extract: false,
  158.     loaderOptions: {
  159.       stylus: {
  160.         'resolve url': true,
  161.         'import': []
  162.       },
  163.       //                        less: {
  164.       //                        // `globalVars` 定义全局对象,可加入全局变量
  165.       //                                globalVars: {
  166.       //                                                primary: '#333'
  167.       //                                        }
  168.       //                                }
  169.     },
  170.     requireModuleExtension: true,
  171.   },
  172.   // webpack-dev-server 相关配置
  173.   devServer: { // 设置代理
  174.     hot: true, //热加载
  175.     host: 'localhost', //ip地址
  176.     port: 8085, //端口
  177.     https: false, //false关闭https,true为开启
  178.     open: true, //自动打开浏览器
  179.     proxy: {         //配置多个跨域
  180.       '/api': { //本地
  181.         //target: 'http://172.168.10.150:81/ysol_wx',
  182.         //target: 'http://yishanonline.cn/ysol_wx',
  183.         target: 'https://yishanol.cn/ysol_wx',
  184.         ws: true,
  185.         changeOrigin: true,
  186.         pathRewrite: {
  187.           '^/api': ''
  188.         }
  189.       }
  190.     }
  191.   },
  192.   pluginOptions: { // 第三方插件配置
  193.     // ...
  194.   },
  195.   chainWebpack: config => {
  196.     // ============压缩图片 start============
  197.     config.module
  198.       .rule('images')
  199.       .use('image-webpack-loader')
  200.       .loader('image-webpack-loader')
  201.       .options({
  202.         //{ bypassOnDebug: true }
  203.         mozjpeg: { progressive: true, quality: 65 },  Compress JPEG images
  204.         optipng: { enabled: false },                // Compress PNG images
  205.         pngquant: { quality: [0.65, 0.9], speed: 4 },   // Compress PNG images
  206.         gifsicle: { interlaced: false },                // Compress SVG images
  207.         //                                        webp: { quality: 75 }
  208.       })
  209.       .end()
  210.     //                                config.module.rules.push({
  211.     //                            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  212.     //                            use:[{
  213.     //                                loader: 'image-webpack-loader',
  214.     //                                options: {bypassOnDebug: true}
  215.     //                            }]
  216.     //                                })
  217.     // ============压缩图片 end============
  218.     config.plugin('html').tap(args => {
  219.       args[0].cdn = cdn
  220.       return args
  221.     })
  222.     /* 添加分析工具*/
  223.     if (process.env.NODE_ENV === 'production') {
  224.       if (process.env.npm_config_report) {
  225.         config
  226.           .plugin('webpack-bundle-analyzer')
  227.           .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  228.           .end();
  229.         config.plugins.delete('prefetch')
  230.       }
  231.     }
  232.     if (process.env.UMI_ENV === 'production') {//当为prod时候才进行sourcemap的上传,如果不判断,在项目运行的打包也会上传 这个为线上日志输出 不需要的可以删除掉
  233.       config.plugin("sentry").use(SentryCliPlugin, [{
  234.         ignore: ['node_modules'],
  235.         include: /\.map$/, //上传dist文件的js
  236.         configFile: 'sentry.properties', //配置文件地址,这个一定要有,踩坑在这里,忘了写导致一直无法实现上传sourcemap
  237.         release: 'release@0.0.1', //版本号,自己定义的变量,整个版本号在项目里面一定要对应
  238.         deleteAfterCompile: true,
  239.         urlPrefix: '~/wx_vue/' //cdn js的代码路径前缀
  240.       }])
  241.     }
  242.   }
  243. }
复制代码
vue3 vue.config.js相对于vue2的话呢,更加简洁,你需要什么的操作,你得本身设置,增加本身的动手能力,除了一些语法上的改变,在有些写法上还是差不多的!打包优化的路还长,下次接着更
到此这篇关于vue.config.js打包优化设置的文章就先容到这了,更多干系vue.config.js打包优化内容请搜刮草根技能分享从前的文章或继续浏览下面的干系文章盼望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作