首页 > 其他 > 详细

vue-cli3 DllPlugin 提取公用库

时间:2020-11-17 09:35:02      阅读:82      评论:0      收藏:0      [点我收藏+]

1、安装相关插件

cnpm install webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev

2、编写配置文件

在项目根目录下新建 webpack.dll.conf.js,输入以下内容。

const path = require(path)
const webpack = require(webpack)
const CleanWebpackPlugin = require(clean-webpack-plugin)

// dll文件存放的目录
const dllPath = public/vendor

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: [vue, vue-router, vuex, axios, element-ui]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: [name].dll.js,
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: [name]_[hash]
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin([*.*], {
      root: path.join(__dirname, dllPath)
    }),
    // 设置环境变量
    new webpack.DefinePlugin({
      process.env: {
        NODE_ENV: production
      }
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, [name]-manifest.json),
      // 保持与 output.library 中名称一致
      name: [name]_[hash],
      context: process.cwd()
    })
  ]
}

3、生成 dll

在 package.json 中加入如下命令

"scripts": {
    ...
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},

4、忽略已编译文件

const webpack = require(webpack)

module.exports = {
    ...
    configureWebpack: {
        plugins: [
          new webpack.DllReferencePlugin({
            context: process.cwd(),
            manifest: require(./public/vendor/vendor-manifest.json)
          })
        ]
    }
}

5、index.html 中加载生成的 dll 文件

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 提取公用库

原文:https://www.cnblogs.com/helow/p/13991922.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!