vue 多页, PC使用element-ui, h5使用Vant 想使用dll ,怎么将不同的dll 追加到想要的index.html?

  • Z时代
  • 2024-02-23
  • 分类：IT

vue 多页, PC使用element-ui, h5使用Vant, 想使用dll来加快打包速度,怎么将不同的dll追加到想要的index.html, 现在是不分哪个页面, 都把这堆追加上去了. add-asset-html-webpack-plugin 无法指定哪个entry.

回答：

在 index.html 的 head 里面先加一个 script 标签，然后根据 navigator.userAgent 来判断是否是移动端，然后用cdn的方式引入对应ui库

<script>
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
const script = document.createElement('script')
script.src = isMobile? './xxx/vant.min.js' : './xx/element-ui.min.js'
document.head.appendChild(script)
</script>

回答：

plugins: [
  new webpack.DllReferencePlugin({
    manifest: require('./dll/vendor1-manifest.json')
  }),
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, './dll/vendor1.dll.js'),
    includeSourcemap: false,
    publicPath: '',
    outputPath: '',
    hash: true,
    // 指定要添加到的HTML页面
    files: ['index1.html']
  })
]

回答：

你可以使用 html-webpack-plugin 的钩子来实现这个功能。

首先，你需要在 webpack 配置文件中定义一个变量来存储每个入口文件对应的 DLL 文件：

const dlls = {
  entry1: 'path/to/dll1.js',
  entry2: 'path/to/dll2.js',
  // ...
};

然后，你可以使用 html-webpack-plugin 的 beforeAssetTagGeneration 钩子来修改每个入口文件的 HTML 模板。在这个钩子中，您可以根据入口文件的名称，从上面定义的 dlls 变量中获取对应的 DLL 文件路径，并将其添加到 HTML 模板中：

const HtmlWebpackPlugin = require('html-webpack-plugin');
class AddAssetHtmlPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('AddAssetHtmlPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        'AddAssetHtmlPlugin',
        (data, cb) => {
          const dll = dlls[data.plugin.options.filename];
          if (dll) {
            data.assets.js.unshift(dll);
          }
          cb(null, data);
        }
      );
    });
  }
}

最后，你需要在 webpack 配置文件中使用这个插件：

const AddAssetHtmlPlugin = require('./AddAssetHtmlPlugin');
module.exports = {
  // ...
  plugins: [
    new AddAssetHtmlPlugin(),
    // ...
  ],
};

回答：

vue 多页, PC使用element-ui, h5使用Vant 想使用dll ,怎么将不同的dll 追加到想要的index.html?

看了下你这插件，本质上还是依赖于 HtmlWebpackPlugin ，那么其实可以直接使用 HtmlWebpackPlugin 这个插件，多去官方文档查一查。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 vue 多页, PC使用element-ui, h5使用Vant 想使用dll ,怎么将不同的dll 追加到想要的index.html? 的全部内容， 来源链接： utcz.com/p/933901.html

回到顶部