亲宝软件园·资讯

展开

react 项目 中使用 Dllplugin 打包优化技巧

妹宝真的好可爱呜呜 人气:0

webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~

在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 reactlodashvue 我们希望能和自己的代码分离开。

他们可以打包常用的且不经常更新的模块,生成 JS 和 json文件一般放入 public 目录中;项目打包时不会再对这些依赖进行编译,而是通过在 html 中插入 script 标签来读取依赖。比如 vue,antd,echarts 等常用框架和资源库。这在项目依赖包达到一定规模时尤为明显,在速度的提升上是显著的。

原理:项目中引入了很多第三方库,这些库在很长的一段时间内,基本不会更新,打包的时候分开打包来提升打包速度,而DllPlugin动态链接库插件,其原理就是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。

使用步骤

1. 根目录(即跟src平级)下,新建 webpack.dll.config.js 文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
 
// dll文件存放的目录
const dllPath = "public/vendor";
 
module.exports = {
  mode: "development",
  entry: {
    // 需要提取的库文件
    vendor: ["react-router-dom", "react", "antd"],
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: "[name].dll.js",
    library: "[name]_[hash]",
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
      name: "[name]_[hash]",
      context: process.cwd(),
    })
  ],
};

2. 然后在webpack.config.js中添加代码

plugins: [
    new webpack.DllReferencePlugin({
        manifest: require('../public/vendor/vendor-manifest.json')
      }),
  ]

3. 在入口html文件中引入 vendor.dll.js

注意:为避免在 路由的非根路径刷新页面导致报错,请使用绝对路径。

<script defer="defer"
src="%PUBLIC_URL%/vendor/vendor.dll.js"></script>

4. 在package.json文件中添加快捷命令(build:dll)

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build:dll": "webpack --config webpack.dll.config.js"
  },

最后打包的时候首先执行npm run build:dll命令会在打包目录下生成 vendor-manifest.json 文件与 vendor.dll.js 文件。 打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。

再执行npm run build 即可。

结果截图

1. npm run build:dll

 2. npm run build

主要说明

clean-webpack-plugin 主要用于每次生成动态链接库时首先清空 vendor 目录。

一般定义为 public/vendor。

注意:一般将动态链接库放到项目的 public 目录下,而不要放在 dist 或其他目录中。

定义提取哪些库/依赖。

manifest (或者是内容属性)中请求的上下文,这里使用 process.cwd() 返回当前工作目录。

参考链接

Webpack 打包太慢?

构建速度——记 Vue 项目中 Webpack 使用 DllPlugin

webpack4 的30个步骤打造优化到极致的 react 开发环境

Webpack V5 + React 脚手架的配置

加载全部内容

相关教程
猜你喜欢
用户评论