DllPlugin和DllReferencePlugin

[XJIANBIN]

配置

webpack.prod.conf.js同级下面增加一个webpack.dll.conf.js

// 安装相关依赖
const path = require("path");
const webpack = require("webpack");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: {
        vendor: ["axios", "vue/dist/vue.esm.js", "vue-router", "swiper"]
    },
    output: {
        path: path.resolve(__dirname, "../static/"),
        filename: "[name].dll.js",
        library: "[name]_library"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "build", "[name]-manifest.json"),
            name: "[name]_library"
        })
    ]
};

配置webpack.prod.conf.js

const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./build/vendor-manifest.json")
        }),
 new AddAssetHtmlPlugin({
            filepath: path.resolve(__dirname, "dist/js/*.dll.js")
        }),

pack.json增加命令行

"build:dll": "webpack --config build/webpack.dll.conf.js"

DllPlugin和CommonsChunkPlugin

DllPlugin&DllReferencePlugin这一方案实际上也是属于代码分割的范畴，但与CommonsChunkPlugin不一样的是，它不仅仅是把公用代码提取出来放到一个独立的文件供不同的页面来使用，它更重要的一点是：把公用代码和它的使用者（业务代码）从编译这一步就分离出来。因为业务代码常改，而公用代码不常改，那么，我们在日常修改业务代码的过程中，就可以省出编译公用代码那一部分所耗费的时间了。

这里说法可能有问题，后面再修改

谈一谈webpack4废除了CommonsChunkPlugin

webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。
webpack 4 的Code Splitting 它最大的特点就是配置简单，如果你的 mode 是 production，那么 webpack 4 就会自动开启 Code Splitting。
webpack 4 能智能的帮你进行代码分块，并且策略是进行了一行权衡：
新的 chunk 是否被共享或者是来自 node_modules 的模块
新的 chunk 体积在压缩之前是否大于 30kb
按需加载 chunk 的并发请求数量小于等于 5 个
页面初始加载时的并发请求数量小于等于 3 个
如果不满足上面条件是不会被独立出一个bundle。
RIP CommonsChunkPlugin

参考资料

让你的Webpack起飞—考拉会员后台Webpack优化实战
Webpack Tutorial