vue的打包优化方案

欢迎访问我的更多文章我的网站

使用插件去除console

安装一下:

cnpm install uglifyjs-webpack-plugin

vue.config.js文件中添加:

//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

vue.config.js中添加插件:

//打包环境去掉console.log等
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        //warnings: false, 注释不然打包会报错如图下图
                        drop_console: true,  //注释console
                        drop_debugger: true, //注释debugger
                        pure_funcs: ['console.log'], //移除console.log
                    },
                },
            })

vue.config.js全部:

const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack");
//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = defineConfig({
    transpileDependencies: true,
    //代理
    devServer: {
        // 指定项目启动时的默认端口号
        port: 80,
        historyApiFallback: true,
        allowedHosts: 'all',
        proxy: {
            '/': {
                ws: false,
                // target: "http://icestone.top:8090",
                target: "http://localhost:89",
                changeOrigin: true,
                pathRewrite: {
                    '^/': '/'
                }
            }
        },
        // proxy: 'http://localhost:8090'
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            }),
            //打包环境去掉console.log等
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        //warnings: false, 注释不然打包会报错如图下图
                        drop_console: true,  //注释console
                        drop_debugger: true, //注释debugger
                        pure_funcs: ['console.log'], //移除console.log
                    },
                },
            })
        ],

        output: {
            libraryExport: '../behind/src/static'
        }
    },
})

打包之前read页面的输出:

day?
App.vue:32 true
request.js:24 token不存在
Comment.vue:60 请求的id:304
request.js:24 token不存在

打包之后放到服务端并访问:

控制台啥也没有了

使用cdn

去除调试断电还好,更多的是不让其他人看到你项目的开发关键断点

对于一些elementui plus ,bootstrap等库的css文件可以使用cdn来加速,直接在index.html页面内引入即可,在此之前需要将main.js中的css引入给注释掉