autodll-webpack-plugin代替DllPlugin

使用autodll-webpack-plugin来代替DllPlugin和DllReferencePlugin的繁琐配置 , 实际内部也是执行dll

github地址 : [github.com/asfktz/auto…]

写的一个demo

const chalk = require("chalk");
const AutoDllPlugin = require("autodll-webpack-plugin"); // 第 1 步：引入 DLL 自动链接库插件
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
    devServer: {
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {https://github.com/asfktz/autodll-webpack-plugin
            "/api": {
                target: `http://127.0.0.1:9999`,
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/"
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            // 测试打包时间
            new ProgressBarPlugin({
                format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
                clear: false
            }),
            // 提升打包效率 
            new AutoDllPlugin({
                inject: true, // 在html中引入
                filename: '[name].js',
                entry: {
                    vendor: [
                        'vue',
                        'element-ui',
                        'vuex',
                        'vue-router'
                    ]
                }
            })
        ]
    }
};

未配置前autodll-webpack-plugin打包时间

配置 autodll-webpack-plugin 后打包时间

打包时间大大提升了, 而且这还是我为了测试没下载多少包的情况,在开发中必定包远不止这些,所以打包速度提升是很可观的