現(xiàn)在很流行使用webpack打包，好處不多說(shuō)。用了就知道。但是其實(shí)配置webpack是挺麻煩得。但是隨著wepback4得升級(jí)，簡(jiǎn)化了流程。變得簡(jiǎn)單了。我這里只是講解怎么優(yōu)化webpack打包速度。不講解基礎(chǔ)配置。

注意: 我這個(gè)是多頁(yè)面打包。得方案

優(yōu)化點(diǎn)1 （optimization.splitChunks）

   stats: {
        // Add asset Information
        assets: false,
        // Add children information
        children: false,

        // Add chunk information (setting this to `false` allows for a less verbose output)
        chunks: false,
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                nocommon:{
                    test: (module, chunk) => {
                    },
                     chunks: 'initial',
                     name: 'nocommon',
                     filename: 'nocommon.[hash:8].js',
                     priority: 10, // 優(yōu)先
                     enforce: true
                },
                common: { // 將第三方模塊提取出來(lái)
                    // test: /(node_modules)/,

                    // test: /(node_modules)/,
                    // test: /node_modules\/(?!front-common)/,
                    test: (module, chunk) => {
                        if (module.resource) {
                        }
                    },
                    chunks: 'initial',
                    name: 'common',
                    filename: 'common.[hash:8].js',
                    priority: 10, // 優(yōu)先
                    enforce: true
                }
            }
        }
    },

stats 簡(jiǎn)化控制臺(tái)輸出內(nèi)容，好日志。
splitChunks webpack4 自帶內(nèi)容。作用主要是把，公用得文件給抽取出來(lái)。防止多次打包，導(dǎo)致提及變慢?？梢园凑兆约旱孟敕ù虬?。

優(yōu)化點(diǎn)2

ParallelUglifyPlugin

    new ParallelUglifyPlugin({
                cacheDir: '.cache/',
                // Optional regex, or array of regex to match file against. Only matching files get minified.
                // Defaults to /.js$/, any f÷

                uglifyES: {
                    // These pass straight through to uglify-es.
                    // Cannot be used with uglifyJS.
                    // uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
                    // files that you're minifying do not need to run in older browsers/versions of node.
                }
            }),

這個(gè)主要是開(kāi)多核壓縮，可以使用多進(jìn)程。
注意：cacheDir: '.cache/',可以生成一個(gè)緩存文件夾。

優(yōu)化點(diǎn)3

 new HappyPack({
            id: 'happy-babel-js',
            loaders: [{
                loader: 'babel-loader'
                // options: {
                //     presets: ['@babel/preset-env'], // presets設(shè)置的就是當(dāng)前js的版本
                // }
            }],
            threadPool: happyThreadPool
        })
  {
                test: /\.(js)$/,
                // exclude: /(node_modules)/,
                // include: [/(src)/, /(node_modules\/front-common)/],
                include: [/(src)/, /(node_modules)/],
                use: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack構(gòu)建loader
 },

HappyPack 也是開(kāi)啟多核

這個(gè)只是大概列舉出來(lái)那些東西，提供一個(gè)git 倉(cāng)庫(kù)。
webpack4極速