优化moment.js的体积

https://juejin.cn/post/6844904009585655816

  1. //在vue-cli3 使用方式：配置vue.config.js的configureWebpack
  3. const webpack = require("webpack");
  4.   configureWebpack: {
  5.     entry: isDev ? [projectThemeEntry, './src/main'] : './src/main',
  6.     devtool: '#cheap-module-eval-source-map',
  7.     plugins: [
  8.          new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en-gb/),
  9.     ]
  10.   }

splitChunks

  1.     config.optimization.splitChunks({
  2.       chunks: 'all',
  3.       cacheGroups: {
  4.         vendor: {
  5.           name: 'chunk-vendors',
  6.           minChunks: 1,
  7.           test: /[\\/]node_modules[\\/]/,
  8.           priority: 20,
  9.           chunks: 'initial'
  10.         },
  11.         hui: {
  12.           name: 'chunk-hui', // 单独将 echarts 拆包
  13.           priority: 30,
  14.           test: /[\\/]node_modules[\\/]hui[\\/]/,
  15.           chunks: 'all'
  16.         },
  17.         echarts: {
  18.           name: 'chunk-echarts', // 单独将 echarts 拆包
  19.           priority: 30,
  20.           test: /[\\/]node_modules[\\/]echarts[\\/]/,
  21.           chunks: 'all'
  22.         }
  23.       }
  24.     });

  • chunks

    • async：默认， 把动态模块打包进 vendor
    • initial：都分开
    • all:：把动态和非动态模块块都扔到 一个vendors里面

  • minChunks: 引入次数，如果为2 那么一个资源最少被引用两次才可以被拆分出来


  • 非常好，可以参考