webpack 性能优化 dll 分包

webpack 性能优化 dll 分包

html-webpack-externals-plugin

DLLPlugin

https://www.webpackjs.com/configuration/

https://webpack.js.org/plugins/dll-plugin/#dllplugin

old 👎

dll 的方式好像在webpack4里面应用的不是很多了，webpack4已经做了优化；我查看了下vue-cli以及create-react-app都抛弃了这个配置，具体原因地址：https://github.com/vuejs/vue-cli/issues/1205

作者回复:
是的，如果项目使用了 Webpack4，确实对 dll 的依赖没那么大，使用 dll 相对来说提升也不是特别明显。
而且有 hard-source-webpack-plugin 可以极大提升二次构建速度。

不过从实际前端工程中来说， dll 还是很有必要掌握的。对于一个团队而言，基本是采用相同的技术栈，要么 React、要么Vue 等等。
这个时候，通常的做法都是把公共框架打成一个 common bundle 文件供所有项目使用。
比如我们团队会将 react、react-dom、redux、react-redux 等等打包成一个公共库。
dll 可以很好的满足这种场景：将多个npm包打成一个公共包。
因此团队里面的分包方案使用 dll 还是很有价值，常见的会从整个工程的角度分为基础包（react、redux等）、业务公共包（所有业务都要用到的监控上报脚本、页面初始化脚本）、某个业务的js。

webpack.dll.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        library: [
            'react',
            'react-dom'
        ]
    },
    output: {
        filename: '[name]_[chunkhash].dll.js',
        path: path.join(__dirname, 'build/library'),
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]_[hash]',
            path: path.join(__dirname, 'build/library/[name].json')
        })
    ]
};

refs

https://time.geekbang.org/course/detail/100028901-116017

https://gitee.com/geektime-geekbang/geektime-webpack-course/blob/master/code/chapter05/my-project/webpack.dll.js

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---