使用DllPlugin 提取公用库

我的未来我决定 提交于 2020-02-26 19:13:20

不使用dll的时候, vue是直接和应用一起打包的, 每次更新应用, 用户端需要下载所有新的js

 

优化后, 大小会大一点, 但是每次更新时用户不需要重新下载vue的js, 只需要更新app相关的js

 

去除map和core-js, 反正唯一的用户是我, 而我只用chrome ~

 

安装所需模块

npm i clean-webpack-plugin add-asset-html-webpack-plugin webpack-bundle-analyzer -D

新建配置文件 webpack.dll.config.js

const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

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

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

 

修改vue.config.js文件,  使用插件注入dll并将dll的script脚本加到index.html中

const webpack = require("webpack");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const path = require("path");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  lintOnSave: false,
  // 基本路径
  publicPath: "",
  assetsDir: "./",
  outputDir: "docs",
  productionSourceMap: false, // 去除生产环境的source map

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

 

本地使用serve可以达到效果, 但是git doc的方式不行, 更新后依然会全部请求.....

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!