未做优化之前： Dist包大小5.3M

一、安装可视化插件 预览当前资源分布情况 （webpack-bundle-analyzer）

npm install webpack-bundle-analyzer --save-dev

配置config.js文件

chainWebpack(config) {
    // 添加解析工具/*  */
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
      config.plugins.delete('prefetch')
    }
}

配置运行命令：

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

打包运行命令后 会自动启动可视化界面

优化方式：

• 资源懒加载
• 路由、组件按需加载
• 未引用到或者已经放弃掉的无效资源卸载
• 组件管理中丢弃无用组件 echarts图标库 后期需要按需引入
• 富文本编辑器全部卸载 并删除当前使用的组件, 项目中目前唯一使用的quill富文本编辑器
• 删除不必要菜单并删除相关文件

优化完成打包之后：

查看当前资源分布情况：

发现codemirror.js文件跟element 组件占用资源空间较多

• 持续优化移除codemirror
• 依赖element按需加载 babel.config.js

const plugins = ['@vue/babel-plugin-transform-vue-jsx']
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}
plugins.push([
  'component',
  {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }
])
module.exports = {
  plugins: plugins,
  presets: [
    '@vue/app'
  ]
}

运行打包命令看模块分析文件

再看当前dist文件包

至此 项目文件包体积减小3M 到达理想状态,后续项目稳定之后 再进行二次优化

项目优化完成后 将该插件（webpack-bundle-analyzer）移除

二、服务端优化： 服务器端渲染指南（前后端配合）

开启GIZP压缩 前端配置：

安装插件: npm install --save-dev compression-webpack-plugin@1.1.12 配置config.js文件

const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  productionSourceMap: true,
  crossorigin: 'anonymous',
  lintOnSave: false,
  publicPath: '/',
  configureWebpack: {
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new CompressionPlugin({
        algorithm: 'gzip', // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
        minRatio: 1, // 压缩率小于1才会压缩
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
      })
    ]
  }
}