webpack4打包vendor过大问题

发表于 | 更新于

webpack4 vendor过大解决方案

webpack.config中optimization配置多个cacheGroups，对库进行分类打包

  • 需要注意window和mac正则分割符，已踩坑

optimization配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
optimization: {
   namedChunks: true,
   splitChunks: {
     minSize: 30000,
     cacheGroups: {
       commons: {
         chunks: 'initial', // 'initial', 'async', 'all'
         name: 'commons',
         minChunks: 2,
         maxInitialRequests: 5,
         minSize: 0,
         priority: 0, // 优先级
       },
       // 单独打包vue插件
       'vue-vendor': {
         chunks: 'initial', // 'initial', 'async', 'all',
         test: /[\/]node_modules[\/]vue/, // <- window | mac -> /node_modules/vue/
         name: 'vue-vendor',
         priority: -9,
         enforce: true,
       },
       vendor: {
         chunks: 'initial', // 'initial', 'async', 'all'
         test: /node_modules/,
         // test: /node_modules/,
         name: 'vendor',
         priority: -10,
         enforce: true,
       }
     }
   }
 },

完整webpack.base.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '../', dir)
}

const isDev = process.env.NODE_ENV === 'development'

module.exports = {
  output: {
    filename: 'js/[name].[hash].js',
    chunkFilename: 'js/[id].[hash].js'
  },
  module: {
    rules: [
      {
        test: /.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src')],
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: true
        }
      },
      {test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig},
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/components/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[ext]?[hash]',
        },
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]?[hash]',
        }
      },
      {
        test: /.(scss|css)$/,
        use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    },
  },
  optimization: {
    namedChunks: true,
    splitChunks: {
      minSize: 30000,
      cacheGroups: {
        commons: {
          chunks: 'initial', // 'initial', 'async', 'all'
          name: 'commons',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 0, // 优先级
        },
        // 单独打包vue插件
        'vue-vendor': {
          chunks: 'initial', // 'initial', 'async', 'all',
          test: /[\/]node_modules[\/]vue/, // <- window | mac -> /node_modules/vue/
          name: 'vue-vendor',
          priority: -9,
          enforce: true,
        },
        vendor: {
          chunks: 'initial', // 'initial', 'async', 'all'
          test: /node_modules/,
          // test: /node_modules/,
          name: 'vendor',
          priority: -10,
          enforce: true,
        }
      }
    }
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        name: JSON.stringify(process.env.npm_package_name)
      }
    }),
    new CopyWebpackPlugin([
      {
        from: resolve('static'),
        to: '',
        ignore: ['.*'],
      },
    ]),
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: true,
      favicon: resolve('static/favicon.ico'),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        minifyJS: true,
        minifyCSS: true,
      },
      chunksSortMode: 'dependency',
    })
  ],
}