vue cli3 多页面应用build打包优化

随着页面应用开发，打包体积越来越大，特别是对多页面应用，体积过大导致用户首次加载特别慢，给用户带来极不好体验。优化打包文件体积，从以下几方面入手；
1，利用uglifyjs-webpack-plugin压缩代码

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

vue.config.js配置

            // 代码压缩
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生产环境自动删除console
                        compress: {
                            //warnings: false, // 若打包错误，则注释这行
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true,
                    cache: true
                })
            )

2，利用compression-webpack-plugin 做gzip压缩

// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')

vue.config.js配置

            // gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文件
                })
            )

3，使用splitChunks进行代码分割

            // 公共代码抽离
            config.optimization = {
                splitChunks: {
                    cacheGroups: {
                        vendor: {
                            chunks: 'all',
                            test: /node_modules/,
                            name: 'vendor',
                            minChunks: 1,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 100
                        },
                        common: {
                            chunks: 'all',
                            test: /[\\/]src/,
                            name: 'common',
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 60
                        },
                        styles: {
                            name: 'styles',
                            test: /\.(sa|sc|c)ss$/,
                            chunks: 'all',
                            enforce: true
                        },
                        runtimeChunk: {
                            name: 'manifest'
                        }
                    }
                }
            }
        }

4，利用image-webpack-loader 图片压缩
依赖引入，使用npm或者yarn 会出一些奇怪多问题

cnpm i image-webpack-loader --save

vue.config.js配置

            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()

5，CSS是否分离

css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: false,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        // 启用 CSS modules for all css / pre-processor files.
        requireModuleExtension: true,
        // 向所有 Sass 样式传入共享的全局变量
        loaderOptions: {
            sass: {
                prependData: `@import "~styles/mixins.scss";`
            }
        }
    }

6，配置CDN
vue.config.js配置

// cdn链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
    },
    // cdn的css链接
    css: ['https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'],
    // cdn的js链接
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.6/vue-router.min.js',
        'https://cdn.bootcss.com/element-ui/2.8.2/index.js'
    ]
}


   configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
        ...
    }

index.html配置

<!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>

<!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- 使用CDN的JS文件 -->

7，OSS配置
使用阿里的对象存储功能，打包时自动将静态文件放到OSS，用户请求资源直接从OSS获取，减小服务器压力，加快响应速度。
打包完成之后只需更新入口文件index.html即可，oss保留老版本资源，不替换index.html，老版本还是可以用的。
根目录新增oss.config.js配置文件，外部引入oss配置，oss配置可以不用提交到git上，防止数据泄漏。

export const client = oss({
  accessKeyId: 'your access key',
  accessKeySecret: 'your access secret',
  bucket: 'your bucket name',
  region: 'oss-cn-hangzhou'
});

// 是否使用oss
const needOss = false
const getHandledValue = num => {
    return num < 10 ? '0' + num : num
}
function getTimeStr() {
    const d = new Date()
    const year = d.getFullYear()
    const month = getHandledValue(d.getMonth() + 1)
    const date = getHandledValue(d.getDate())
    const hours = getHandledValue(d.getHours())
    const minutes = getHandledValue(d.getMinutes())
    const second = getHandledValue(d.getSeconds())
    let resStr = '' + year + month + date + hours + minutes + second
    return resStr
}
module.exports = {
    // 上传到oss上的目录，getTimeStr()是获取当前时间的格式化字符串，如：20200107211212
    publicPath: isProduction && needOss ? 'oss地址路径' + getTimeStr() + '/' : '/'
    ...
    chainWebpack: config => {
        ...
        if (isProduction && needOss) {
            config.plugin('webpack-aliyun-oss-plugin').use(require('webpack-aliyun-oss-plugin'), [require('./oss.config.js')])
        }
    }
}