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

【问题标题】：Webpack code-splitting from within vendor files?从供应商文件中拆分 Webpack 代码？
【发布时间】：2019-08-19 05:03:45
【问题描述】：

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

两者都以能够很容易地膨胀你的包而闻名，除非你对你的进口很聪明。

我们正在尝试减少初始捆绑包的大小，因为 lodash 和 moment 仅在大约 20% 的网站中需要。

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

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

但是，node_modules 深处的库只是在做：

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

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

了解使用 Vue CLI 构建项目可能很有用，因此我们的 webpack 配置实际上存储在 vue.config.js 中

【问题讨论】：

标签： webpack momentjs lodash vue-cli code-splitting

【解决方案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';
          }
// ...
}

【讨论】：

抱歉，对vue.config.js 部分不感兴趣，你自己想想吧。

【解决方案2】：

我在我们公司的网站上遇到了类似的问题——不是在 Vue 项目上，但可能有点帮助——我已经完全重写了该网站。我所做的是：

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

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

这是我们的配置：https://gist.github.com/muuvmuuv/b97153fcfe462d837ef8e8535f69fc82

【讨论】：