Question

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

这两个都是众所周知的，除非您精通进口产品，否则它们都能很容易地膨胀您的捆绑包。

我们正试图减小初始捆绑包的大小，因为可能只在20％的站点中才需要lodash和力矩。

-

我知道在我们的代码库中我们可以做类似的事情

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项目上，但可能有所帮助-我已经完全重写了。我所做的是：

将concatenateModules设置为true（computing the index）
将namedModules和namedChunks设置为true（我们需要这样做，因为我编写的许多插件也使用webpack，并且我不想加载jQuery等十次） / li>
将runtimeChunk设置为'single'并仅在所有其他文件（！）之前加载一次（这将处理所有由webpack编译的脚本）
将usedExports设置为true以跳过以前使用的导出
根据黑客建议添加cacheGroups
添加BundleAnalyzerPlugin之类的插件，以查看哪些文件确实使项目project肿了
添加TerserPlugin来缩小/简化所有内容（将在webpack 5中用作默认值）
执行此操作：const function = require('lib/source/function')而不是const { function } = require('lib')（这只需要这个小脚本，而不需要Hole lib）

，如果要使用清单插件更好地使用哈希文件名

这是我们的配置：https://webpack.js.org/plugins/module-concatenation-plugin/

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

2 个答案: