Question

我在vendor.js文件中添加了一个自定义库，由于该文件的大小增加了约10 mb以上，因此需要提出一个解决方案来单独加载该自定义库。因此，当我考虑加载此自定义库时，问题是如何分离它以及如何加载它？

Answer 1

代码拆分是我喜欢的webpack最引人注目的功能之一：

此处的键entry中有模块：

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack将自动为您的模块创建单独的文件：

        Asset     Size   Chunks             Chunk Names
another.bundle.js  550 KiB  another  [emitted]  another
  index.bundle.js  550 KiB    index  [emitted]  index

检查此link以获得更多详细信息：

Answer 2

我发现link对我的情况很有用。下面的这段代码有帮助

new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: (m) => /node_modules/.test(m.context)
    }),
new webpack.optimize.CommonsChunkPlugin({
            name: 'react-router',
            minChunks: (m) => /[\\/]node_modules[\\/](react-router)[\\/]/.test(m.context)
        })

如何在vendor.js中分离自定义库并将其作为单独的文件加载，特别是在单击链接时

2 个答案: