webpack性能优化-js教程-PHP中文网

首页

web前端

js教程

webpack性能优化

小云云

Jan 04, 2018 pm 02:08 PM

web webpack 性能

Webpack性能优化的方式有很多种，本文之所以将 dll 单独讲解，是因为 dll 是一种最简单粗暴并且极其有效的优化方式。本文主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

在通常的打包过程中，你所引用的诸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等众多库也会被打包进 bundle 文件中。由于这些库的内容基本不会发生改变，每次打包加入它们无疑是一种巨大的性能浪费。

Dll 的技术就是在第一次时将所有引入的库打包成一个 dll.js 的文件，将自己编写的内容打包为 bundle.js 文件，这样之后的打包只用处理 bundle 部分。

以一个 Vue 项目为例，首先创建一个名为 webpack.dll.config.js 的文件

var path = require("path"),
　　fs = require(&#39;fs&#39;),
　　webpack = require("webpack");

var vendors = [
　　&#39;vue&#39;, 
　　&#39;vue-router&#39;, 
　　&#39;vuex&#39;
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

登录后复制

这个文件的作用是将 vue、vue-router 以及 vuex 合并打包为一个名为 Dll.js 的静态资源包，同时生成一个 manifest.json 文件方便对 Dll.js 中的模块进行引用。

要注意的是，执行 webpack 命令是默认执行该目录下名为 webpack.config.js 或者 webpackfile.js 的文件。所以需要通过 --config 指令手动指定该文件，最后加入 -p 指令将 Dll.js 压缩。

$ webpack --config webpack.dll.config.js -p

登录后复制

这样，在项目根目录下就会多增加一个 dist 文件夹，其中有压缩之后的 Dll.js 与 manifest.json 文件。

manifest.json 文件内容如下，给各个模块赋予 id 以便引用。

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

登录后复制

最后在 webpack.config.js 中添加引用。在 plugins 属性中添加 DllReferencePlugin 插件，并指明 manifest.json 文件的引用路径。

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(&#39;./dist/manifest.json&#39;)
  })
]

登录后复制

在确保成功执行 webpack.dll.config.js 文件后，执行 webpack -p 进行项目打包。

可以看到打包在 Dll 文件中的文件都被 delegated(委派) ，而不是直接打进 bundle 文件中。

这样我们就将所有的资源完成打包，生成的 dist 目录如下：

不过 dist 文件夹要想作为一个完整的工程还少一个 html 文件，我创建了一个名为 pack.js 的文件，使用 nodejs 的 fileSystem 对 html 文件进行修改并拷贝。

pack.js

var fs = require(&#39;fs&#39;);

fs.readFile(&#39;./index.html&#39;, &#39;utf8&#39;, (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace(&#39;bundle.js&#39;, &#39;bundle.js?v=&#39;+timestamp)
          .replace(&#39;<!-- dll -->&#39;, &#39;<script src="./dist/Dll.js?v=&#39;+ timestamp +&#39;"></script>&#39;);

    fs.writeFile(&#39;./dist/index.html&#39;, dataStr, (error) => {
      if (!error) {
        console.log(&#39;HTML file copy successfully&#39;);
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

登录后复制

我们需要在模块的入口 html 中添加的占位字符，pack.js 的作用就是将 html 文件拷贝一份到 dist 目录下，同时将替换为引用 Dll.js 的 script 标签，并在引用文件后添加时间戳。

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

登录后复制

在执行 webpack -p 打包后，输入下面命令运行 pack.js，就会在 dist 目录下生成 html 文件。

$ node pack.js

登录后复制

内容如下：

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

登录后复制

这样 dist 文件夹就作为一个完整的、不需要任何手动操作、已经压缩混淆后的项目可以直接进行线上的部署。

实际项目模板参考地址如下。由于笔者作为 React 与 Vue 的双持开发者，所以创建了两个模板，以便之后通过 yomen(yo) 之类的进行脚手架工具化。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7529

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Windows10与Windows11性能对比：哪个更胜一筹？ Mar 28, 2024 am 09:00 AM

Windows10与Windows11性能对比：哪个更胜一筹？随着科技的不断发展和进步，操作系统也在不断更新和升级。微软公司作为全球最大的操作系统开发商之一，其发布的Windows系列操作系统一直备受用户关注。在2021年，微软发布了Windows11操作系统，这引发了广泛的讨论和关注。那么，究竟Windows10与Windows11在性能方面有何不同，哪个

Win11和Win10系统性能对比，究竟哪一个更胜一筹？ Mar 27, 2024 pm 05:09 PM

一直以来，Windows操作系统一直是人们在个人电脑上使用最为广泛的操作系统之一，而Windows10长期以来一直是微软公司的旗舰操作系统，直到最近微软推出了全新的Windows11系统。随着Windows11系统的推出，人们对于Windows10和Windows11系统之间的性能差异开始感兴趣，究竟两者之间哪一个更胜一筹呢？首先，让我们来看一下W

麒麟8000处理器抗衡骁龙系列：谁能称王？ Mar 25, 2024 am 09:03 AM

在移动互联网时代，智能手机已经成为人们日常生活中不可或缺的一部分。而智能手机的性能表现往往直接决定了用户体验的好坏。作为智能手机的“大脑”，处理器的性能表现尤为重要。在市场上，高通骁龙系列一直以来都是性能强劲、稳定可靠的代表，而最近华为也推出了自家研发的麒麟8000处理器，据称性能优异。对于普通用户来说，如何选择一款性能强劲的手机成为一个关键问题。今天我们就

PHP与Go语言对比：性能差异大 Mar 26, 2024 am 10:48 AM

PHP与Go语言是两种常用的编程语言，它们有着不同的特点和优势。其中，性能差异是大家普遍关注的一个问题。本文将从性能角度对比PHP和Go语言，并通过具体的代码示例来展示它们的性能差异。首先，让我们简要介绍一下PHP和Go语言的基本特点。PHP是一种脚本语言，最初设计用于Web开发，易学易用，广泛应用于Web开发领域。而Go语言是由Google开发的一种编译型

本地运行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服务，太方便了！ Apr 15, 2024 am 09:01 AM

Ollama是一款超级实用的工具，让你能够在本地轻松运行Llama2、Mistral、Gemma等开源模型。本文我将介绍如何使用Ollama实现对文本的向量化处理。如果你本地还没有安装Ollama，可以阅读这篇文章。本文我们将使用nomic-embed-text[2]模型。它是一种文本编码器，在短的上下文和长的上下文任务上，性能超越了OpenAItext-embedding-ada-002和text-embedding-3-small。启动nomic-embed-text服务当你已经成功安装好o

PHP 数组键值翻转：不同方法的性能对比分析 May 03, 2024 pm 09:03 PM

PHP数组键值翻转方法性能对比表明：array_flip()函数在大型数组（超过100万个元素）下比for循环性能更优，耗时更短。手动翻转键值的for循环方法耗时相对较长。

不同Java框架的性能对比 Jun 05, 2024 pm 07:14 PM

不同Java框架的性能对比：RESTAPI请求处理：Vert.x最佳，请求速率达SpringBoot2倍，Dropwizard3倍。数据库查询：SpringBoot的HibernateORM优于Vert.x及Dropwizard的ORM。缓存操作：Vert.x的Hazelcast客户机优于SpringBoot及Dropwizard的缓存机制。合适框架：根据应用需求选择，Vert.x适用于高性能Web服务，SpringBoot适用于数据密集型应用，Dropwizard适用于微服务架构。