从供应商文件中拆分Webpack代码？

Question

我们正在使用一些js库，它们在内部导入lodash和moment。

两者都以能够非常容易地膨胀您的捆绑包而闻名，除非您的智能导入。

我们正试图减少我们的初始捆绑尺寸，因为只需20％的网站就可以获得lodash和moment。

--

我知道在我们的代码库中我们可以做一些事情

const moment = () => import(/* webpackChunkName "moment" */'moment');

然而，因为node_modules内部的图书馆正在做：

import moment from 'moment'
import _ from 'lodash'

无论如何使用webpack，我们可以标记所有这些因为它们应该拆分出来吗？

也许有用的知道是使用Vue CLI来构建项目所以我们的webpack配置实际上存储在vue.config.js中

Answer 1

webpack splitchunks.cacheGroups就是您所需要的。检查链接。

基本上你可以手工挑选哪个模块进入哪个块：

optimization: {
    splitChunks: {
      cacheGroups: {
        lodashAndMoment: {
          test(module, chunks) {
            //...
            // WATCH OUT! WATCH OUT! WATCH OUT!
            // I'm not 100% sure `module.name` actually looks like this
            // It's my IRRESPONSIBLE GUESS just to show the idea.
            return module.name === 'lodash' || module.name === 'moment';
          }
// ...
}

Answer 2

我有一个类似的问题 - 不是在Vue项目上，但可能有点帮助 - 在我公司的网站上我完全重写了。我所做的是：

1. 将concatenateModules设为true（https://webpack.js.org/plugins/module-concatenation-plugin/）
2. 将namedModules和namedChunks设置为true（我们需要这个，因为我编写的许多插件也使用webpack而且我不想加载jQuery等10次）
3. 将runtimeChunk设置为'single'并在所有其他文件之前加载一次（！）（这会处理所有webpack编译的脚本）
4. 将usedExports设置为true以跳过之前使用过的导出
5. 添加cacheGroups作为hackape建议
6. 添加一个像BundleAnalyzerPlugin这样的插件来查看哪些文件真的让项目膨胀
7. 添加qazxsw poi来缩小/妥协一切（将在webpack 5中用作默认值）
8. 这样做：TerserPlugin而不是const function = require('lib/source/function')（这只需要这个小脚本，而不是空洞lib）

如果你想使用一个清单插件来更好地使用散列文件名

这是我们的配置：const { function } = require('lib')