vue项目打包优化

ECharts按需使用

let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入柱状图组件
require('echarts/lib/chart/bar')

require('echarts/lib/component/grid')


require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')

拆包

chainWebpack(config) {
    // config.resolve.alias.set("@", resolve("src"));
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) //打包分析插件
    config.plugin('compressionPlugin').use(
      new CompressionWebpackPlugin({
        test: /\.(js|css|json|ico|svg)$/, // 匹配文件格式
        algorithm: 'gzip',
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8, // 压缩比
        deleteOriginalAssets: false, //是否删除源文件
      })
    )
    config.when(process.env.NODE_ENV !== 'development', config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            inline: /runtime\..*\.js$/,
          },
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial',
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
          designVue: {
            name: 'chunk-designVue',
            priority: 15,
            test: /[\\/]node_modules[\\/]_?@ant-design(.*)/,
          },
          antdVue: {
            name: 'chunk-antdVue',
            priority: 50,
            test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/,
          },
          xlsxVue: {
            name: 'chunk-xlsxVue',
            priority: 40,
            test: /[\\/]node_modules[\\/]_?xlsx(.*)/,
          },
          echartsVue: {
            name: 'chunk-echartsVue',
            priority: 30,
            test: /[\\/]node_modules[\\/]_?echarts(.*)/,
          },
          lottieWebVue: {
            name: 'chunk-lottieWebVue',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?lottie-web(.*)/,
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      })
    })
  },