webpack优化实践(遇到很奇葩的问题)

module: {
    rules: [{
        test: /\.js$/,
        use: {
             loader: 'babel-loader',
        },
        // 规避了对庞大的 node_modules 文件夹或者 bower_components 文件夹的处理
        exclude: /(node_modules|bower_components)/,
        include: resolve('source')
    }]
}

module: {
    rules: [{
        test: /\.js$/,
        use: {
            // 开启缓存
            loader: 'babel-loader?cacheDirectory=true'
        },
        exclude: /(node_modules|bower_components)/,
        include: resolve('source')
    }]
}

<script src="https://unpkg.com/element-ui@2.0.8/lib/index.js"></script>
module.exports= {
    externals: {
        ElementUi: 'ELEMENT' // 主要element-ui保留出来的全局变量是ELEMENT
    }
}
import ElementUi from 'ElementUi';

new webpack.optimize.CommonsChunlPlugin({
      name: string, // or
      names: string[],
      // 这是 common chunk 的名称。已经存在的 chunk 可以通过传入一个已存在的 chunk 名称而被选择。
      // 如果一个字符串数组被传入，这相当于插件针对每个 chunk 名被多次调用
      // 如果该选项被忽略，同时 `options.async` 或者 `options.children` 被设置，所有的 chunk 都会被使用，
      // 否则 `options.filename` 会用于作为 chunk 名。
      // When using `options.async` to create common chunks from other async chunks you must specify an entry-point
      // chunk name here instead of omitting the `option.name`.
      filename: string,
      // common chunk 的文件名模板。可以包含与 `output.filename` 相同的占位符。
      // 如果被忽略，原本的文件名不会被修改(通常是 `output.filename` 或者 `output.chunkFilename`)。
      // This option is not permitted if you're using `options.async` as well, see below for more details.
      minChunks: number|Infinity|function(module, count) -> boolean,
      // 在传入  公共chunk(commons chunk) 之前所需要包含的最少数量的 chunks 。
      // 数量必须大于等于2，或者少于等于 chunks的数量
      // 传入 `Infinity` 会马上生成 公共chunk，但里面没有模块。
      // 你可以传入一个 `function` ，以添加定制的逻辑（默认是 chunk 的数量）
      chunks: string[],
      // 通过 chunk name 去选择 chunks 的来源。chunk 必须是  公共chunk 的子模块。
      // 如果被忽略，所有的，所有的 入口chunk (entry chunk) 都会被选择。
      children: boolean,
      // 如果设置为 `true`，所有公共 chunk 的子模块都会被选择
      deepChildren: boolean,
      // 如果设置为 `true`，所有公共 chunk 的后代模块都会被选择
      async: boolean|string,
      // 如果设置为 `true`，一个异步的  公共chunk 会作为 `options.name` 的子模块，和 `options.chunks` 的兄弟模块被创建。
      // 它会与 `options.chunks` 并行被加载。
      // Instead of using `option.filename`, it is possible to change the name of the output file by providing
      // the desired string here instead of `true`.
      minSize: number,
      // 在 公共chunk 被创建立之前，所有 公共模块 (common module) 的最少大小。
});

// webpack.config.js
splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
      default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: {
        // 依赖的库数组
        vendor: [
            'vue/dist/vue.esm.js',
            'axios',
            // 'element-ui',
            'vue-router',
            'vuex',
            'v-viewer',
            'vue-photo-preview',
            'mockjs'
        ]
    },
    output: {
        path: path.join(__dirname, 'htdocs/dist'),
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        new CleanWebpackPlugin(['htdocs/dist/vendor-manifest.json', 'htdocs/dist/vendor.js']),
        new webpack.DllPlugin({
            // DllPlugin的name属性需要和libary保持一致
            name: '[name]_[hash]',
            path: path.join(__dirname, 'htdocs/dist', '[name]-manifest.json'),
            // context需要和webpack.config.js保持一致
            context: __dirname,
        }),
    ],
}

/ package.json
"scripts": {
    "dll": "webpack -p --progress --config ./webpack.dll.config.js" 
    },

module.exports = {
    plugins: [
         new webpack.DllReferencePlugin({
            context: __dirname,
            // manifest就是我们第一步中打包出来的json文件
            manifest: require('./htdocs/dist/vendor-manifest.json'),
        })       
    ]
}

const HappyPack = require("happypack");
// 手动创建进程池
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
    plugins: [
        new HappyPack({
            // 这个HappyPack的“名字”就叫做happyBabel，和楼上的查询参数遥相呼应
            id: 'happyBabel',
            // 指定进程池
            threadPool: happyThreadPool,
            // 输出日志
            verbose: true,
            loaders: ['babel-loader?cacheDirectory']
        }),
    ]
};

// const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
    plugins: [
        new ParallelUglifyPlugin({
            cacheDir: 'cache_dir',//用作缓存的可选绝对路径。如果未提供，则不使用缓存。
            sourceMap: config.build.productionSourceMap, //可选布尔值。是否为压缩后的代码生成对应的Source Map(浏览器可以在调试代码时定位到源码位置了),这会减慢编译速度。默认为false
            uglifyJS: { 
               output: { 
                   comments: false,//是否保留代码中的注释，默认为保留 
               }, 
               warnings: true,//是否在UglifyJS删除没有用到的代码时输出警告信息，默认为false 
               compress: { 
                   drop_console: true,//是否删除代码中所有的console语句，默认为false 
                   collapse_vars: true,//是否内嵌虽然已经定义了，但是只用到一次的变量， 默认值false 
                   reduce_vars: true,//是否提取出现了多次但是没有定义成变量去引用的静态值，默认为false 
               } 
            },
        })
    ]
};