vue项目build打包优化

左手的ㄟ右手 2023-06-05 08:20 30阅读 0赞

## 安装打包优化插件 ##

*  **CompressionWebpackPlugin**  
    Gzip打包压缩，压缩js、html、css
 *  **terser-webpack-plugin**  
    清除console和debugger
 *  **image-webpack-loader**  
    压缩图片
 *  **webpack-bundle-analyzer**  
    打包生成文件大小分析工具

## 打包优化配置 ##

const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const TerserPlugin = require('terser-webpack-plugin');
    const isProduction = process.env.NODE_ENV === 'production'; //生产环境
    
    //cdn加速地址
    const cdn = { 
        css: [],
        js: [
            'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
            'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
            'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
            'https://cdn.bootcss.com/axios/0.19.0/axios.min.js'
        ]
    };
    
    module.exports = { 
        productionSourceMap: false, //不生成map文件,
        publicPath: isProduction ? './' : '/', //打包时区分开发环境与生产环境静态资源路径
        chainWebpack: config => { 
        
        	// 生产环境
            if (isProduction) { 
            
                // 注入cdn加速
                config.plugin('html').tap(args => { 
                    args[0].cdn = cdn;
                    return args;
                });
    
                // 开启图片压缩
                config.module
                    .rule('images')
                    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
                    .use('image-webpack-loader')
                    .loader('image-webpack-loader')
                    .options({  bypassOnDebug: true });
            }
        },
        configureWebpack: config => { 
        	// 生产环境
            if (isProduction) { 
            
                // 用cdn方式引入
                config.externals = { 
                    vue: 'Vue',
                    vuex: 'Vuex',
                    'vue-router': 'VueRouter',
                    axios: 'axios'
                };
    
                // gzip压缩
                config.plugins.push(
                    new CompressionWebpackPlugin({ 
                        algorithm: 'gzip',
                        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
                        threshold: 10240,
                        minRatio: 0.8
                    })
                );
    
                // 压缩js、html、css
                config.plugins.push(
                    new CompressionWebpackPlugin({ 
                        test: /\.js$|\.html$|.\css/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据压缩
                        deleteOriginalAssets: false // 不删除源文件
                    })
                );
    
                // 删除console和debugger
                config.plugins.push(
                    new TerserPlugin({ 
                        terserOptions: { 
                            ecma: undefined,
                            warnings: false,
                            parse: { },
                            compress: { 
                                drop_console: true,
                                drop_debugger: false, //是否删除debugger
                                pure_funcs: ['console.log'] // 移除console
                            }
                        }
                    })
                );
            }
        }
    };

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0" />
            <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
            <title>vue项目build打包优化</title>
        </head>
        <body>
            <noscript>
                <strong>We're sorry but longdian-management doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
            </noscript>
            <div id="app"></div>
            
            <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
            <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
            <% } %>
        </body>
    </html>

## 打包生成文件分析工具 ##

npm run build -- --report

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

## 参考文章 ##

**vue-cli 3.0 build包太大导致首屏过长的解决方案**  
[https://www.jianshu.com/p/d1fb954f5713?utm\_source=oschina-app][https_www.jianshu.com_p_d1fb954f5713_utm_source_oschina-app]

**vue打包优化**  
[https://www.jianshu.com/p/171e8e529f35][https_www.jianshu.com_p_171e8e529f35]  
[https://www.jianshu.com/p/130a856467a1][https_www.jianshu.com_p_130a856467a1]

**vue cli3 优化配置生产去除console.log - from UglifyJs `warnings` is not a supported option**  
[https://blog.csdn.net/sinat\_35538827/article/details/99672544][https_blog.csdn.net_sinat_35538827_article_details_99672544]

**Vue打包优化 详解** [https://blog.csdn.net/zhenghao35791/article/details/93649587][https_blog.csdn.net_zhenghao35791_article_details_93649587]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20230601/0d426413283e48c4a41b1468d217151d.png
[https_www.jianshu.com_p_d1fb954f5713_utm_source_oschina-app]: https://www.jianshu.com/p/d1fb954f5713?utm_source=oschina-app
[https_www.jianshu.com_p_171e8e529f35]: https://www.jianshu.com/p/171e8e529f35
[https_www.jianshu.com_p_130a856467a1]: https://www.jianshu.com/p/130a856467a1
[https_blog.csdn.net_sinat_35538827_article_details_99672544]: https://blog.csdn.net/sinat_35538827/article/details/99672544
[https_blog.csdn.net_zhenghao35791_article_details_93649587]: https://blog.csdn.net/zhenghao35791/article/details/93649587

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 项目打包优化 webpack 3.0+

　配置优化　隐藏源码　　在 config 文件夹下index.js 中 build 　　　`productionSourceMap: true `改为 ...

亦凉/ 2024年04月20日 09:49/ 0 赞/ 96 阅读

相关使用yarn build 打包vue项目时静态文件或图片未打包成功

解决Vue项目使用yarn build打包时静态文件或图片未打包成功的问题 ![在这里插入图片描述][bf8081cec9a14921822051170d02a404.p

分手后的思念是犯贱/ 2023年10月15日 09:44/ 0 赞/ 117 阅读

相关 Vue Cli3 项目打包优化

一、新建项目使用 `vue-cli3` 构建一个初始的Vue项目：[Cli3 官方文档][Cli3] > 因为使用了cli3，很多目录结构不见了，而相关配置是放在`v

柔情只为你懂/ 2023年06月16日 12:53/ 0 赞/ 33 阅读

相关 vue项目build打包优化

安装打包优化插件 CompressionWebpackPlugin Gzip打包压缩，压缩js、html、css terser-webpack-p

左手的ㄟ右手/ 2023年06月05日 08:20/ 0 赞/ 31 阅读

相关 Vue项目打包dll优化——提升打包速度

背景 webpack每次打包都会去处理所有的模块，包括第三方模块。但是我们一般不会去改第三方模块，能不能让第三方模块只处理一次呢？ webpack的打包时间由两个因素

超、凢脫俗/ 2022年12月02日 04:08/ 0 赞/ 508 阅读

相关 Vue 项目优化——生成打包报告

一、命令行形式生成打包报告安装依赖`vue-cli-service build --report` 1.通过`vue-cli`的命令选项可以生成打包报告 2

系统管理员/ 2022年11月22日 05:22/ 0 赞/ 435 阅读

相关 vue项目打包报错“vue-cli-service build “解决方案

vue项目打包报错，错误如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

川长思鸟来/ 2022年09月04日 05:43/ 0 赞/ 826 阅读

相关 Nginx发布Vue项目【 CentOs7，build打包】

> 1、所有文章优先发表在个人博客，后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。 > > 2、个人博客本篇文章地址： [https://www.xdx

梦里梦外;/ 2022年04月16日 02:08/ 0 赞/ 297 阅读

相关在Eclipse中配置Maven build打包+vue打包

在Eclipse中配置Maven build打包 1. 项目右击–>Run As–>Run Configurations 2. 在左侧Maven Build下选中自己

喜欢ヅ旅行/ 2021年09月27日 10:42/ 0 赞/ 641 阅读

相关 vue使用npm run build命令打包项目

vue使用npm run build命令打包项目当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我

水深无声/ 2021年08月30日 16:19/ 0 赞/ 717 阅读