处理js.map文件：productionSourceMap: false

在 vue.config.js 文件添加 productionSourceMap 配置项。js.map 文件是可以查看没有打包加密前的源码，添加配置项后不会生成 js.map 文件，减少包体积。

处理 console.log，注释，控制台黄色警告

vue.config.js 文件配置 terser-webpack-plugin 插件。

terserOptions: {
    output: {
        comments: false, // 去除注释
    },
    warnings: false, // 去除黄色警告,
    compress: {
        drop_console: true,
        drop_debugger: true, // 特定情况需要利用debugger防止调试
        pure_funcs: ['console.log'], // 移除console.log 避免console.error
    }
}

UI框架按需引入

按官方文档配置

第三方架包 CDN 引入

1. vue.config.js 文件配置

const isProduction = process.env.NODE_ENV === 'production'
// CDN优化 不处理，而是全局使用右边的名字遍历
let externals = {
    vue:'Vue',
    'vue-router':'VueRouter',
    axios:'axios',
    vuex:'Vuex'
}
let cdn = {
    build:{
        js:[
            "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js",
            "https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
            'https://unpkg.com/vue-router@3.6.5/dist/vue-router.min.js',
        ]
    },
    dev:{
        js:[],
        css:[]
    }
}

module.exports = {
    configureWebpack: {
        ...
        externals
    },
    // 再加工
    chainWebpack(config){
        // 取出html-webpack-plugin
        config.plugin('html').tap(args=>{
            // 只是处理一个html=>index.html
            if (isProduction) {
                args[0].myCdn = cdn.build;
            } else {
                args[0].myCdn = cdn.dev;
            }
            return args;
        })
    }
}

2. index.html 配置（ejs语法配置）

<% for (var i in htmlWebpackPlugin.options.myCdn && htmlWebpackPlugin.options.myCdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.myCdn.js[i] %>"></script>
<% } %>

3. cdn 的好处：

减少包体积以及服务器带宽。用户使用带宽不变，但是将部分带宽分担出去从而减轻自己服务器带宽。

gzip压缩

对超10kb的js、json、css文件进行压缩。产生的压缩包会增大包体积，但是优先返回压缩包给客户端，可以减少带宽和访问时间，由客户端解析压缩包。在vue.config.js 文件配置compression-webpack-plugin 插件：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  ...defineConfig({
    transpileDependencies: true,
  }),
  productionSourceMap: !isProduction,
  configureWebpack: {
    plugins: [
        new CompressionWebpackPlugin({
          test: /\.(js|json|css)$/i, // 图片一般不Gzip压缩 webpack-image-loader
          threshold: 10240, // 只有在10kb以上才压缩
        })
    ]
  },
}

打包优化处理