vue-cli3 DllPlugin 提取公用库的方法

经过上面的配置，公共库提取出来了，编译速度快了，但如果不引用生成的 dll 文件，网页是不能正常工作的。

打开 public/index.html，插入 script 标签。

...
<script src="./vendor/vendor.dll.js"></script>

到此公用库提取完成，但总觉得最后一部手工插入 script 不太优雅，下面介绍下如何自动引入生成的 dll 文件。

打开 vue.config.js 在

configureWebpack plugins 

add-asset-html-webpack-plugin

const path = require('path')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = {
  ...
  configureWebpack: {
    plugins: [
     new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require('./public/vendor/vendor-manifest.json')
     }),
     // 将 dll 注入到 生成的 html 模板中
     new AddAssetHtmlPlugin({
      // dll文件位置
      filepath: path.resolve(__dirname, './public/vendor/*.js'),
      // dll 引用路径
      publicPath: './vendor',
      // dll最终输出的目录
      outputPath: './vendor'
     })
    ]  }
}

总结

以上所述是小编给大家介绍的vue-cli3 DllPlugin 提取公用库的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！