热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度

一:背景因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加

一:背景

因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。

首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。

这里参考一些资料:

webpack4官方文档:https://webpack.docschina.org/api/module-methods/#import-

在这里插入图片描述
VUE的懒加载:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
在这里插入图片描述

二:开始demo

首页先启动一个普通的webpack4项目,可以用脚手架,不过需要自己配置一些webpack4特性,这里可以参考:webpack3 项目升级 webpack4

项目起来后,就可以用import实验一番:
在这里插入图片描述
这里我定义了三个界面(HelloWorld1,HelloWorld2,HelloWorld3),其中HelloWorld1用的impot()按需的方式,其他两个都是直接import。

注意:这里的/* webpackChunkName: "h-w1" */
是webpack4中提供的注解,给切割模块命名,如果不要这个注解的话切割出来的模块js不能分辨是那个业务模块的,所以一般都是一个业务模块共用一个名称。

代码这样加了之后,控制台可能会一些错:
在这里插入图片描述
这个错的意思就是不能识别import()的这种写法,因为还需要Babel的支持,网上查了下,需要babel-plugin-dynamic-import-node插件和配置.babelrc文件,那我们就配上:
在这里插入图片描述
在这里插入图片描述
配上这些过后,代码确实没有语法错误了,可以正常启动访问。

但是打包并没有切割开代码:
在这里插入图片描述
这是打的包,并没有看到我们定义的h-w1的包。

这里前前后试了几个插件和配置都不行,语法还是抱错,最后终于试出来了:
1,要么在升级eslint的版本,用5.14以后的;
在这里插入图片描述

2,要么eslint可以用4.19的,但要加上acorn插件;
在这里插入图片描述
这里上面两种方法都可以解决问题,至于前面说的配置.babelrc文件可以还原了,那个加上反而打包没效果了,小白我也不懂。。。。
在这里插入图片描述
最好我们就可以运行:npm run build 看效果了,结果又抱错了:
在这里插入图片描述
从出错信息来看,是UglifyJS不支持ES6的语法。理论上不应该啊…
于是Google之,发现uglifyjs-webpack-plugin 2.0版本的Release日志中,明确提示重新切换回到uglify-js,因为uglify-es被废弃了,如果需要ES6代码压缩,请使用terser-webpack-plugin

解决

方法一:安装并使用[terser-webpack-plugin]:
(参考:http://makeup1122.github.io/2018/10/12/webpack-UglifyJS-issue/)

方法二:降低UglifyJS版本

这里我选第二个,最方便,把uglifyjs-webpack-plugin 降到1.1.1版本:在这里插入图片描述
再打包,终于成了,把HelloWorld1分离出来独立包h-w1
在这里插入图片描述
大家可以搜索下,h-w1包里面的代码和app包里面的代码是不是隔离的,也可以浏览器访问这包,看看h-w1包的js是不是按需加载的,这里就不贴结果了,我自己测试都是准确的。

项目完整demo:https://github.com/BothEyes1993/webpack4_demo


推荐阅读
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • FastDFS Nginx 扩展模块的源代码解析与技术剖析
    FastDFS Nginx 扩展模块的源代码解析与技术剖析 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • Vue CLI 初始化 Webpack 项目时,main.js 文件是如何被调用的? ... [详细]
  • Java能否直接通过HTTP将字节流绕过HEAP写入SD卡? ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 在过去,我曾使用过自建MySQL服务器中的MyISAM和InnoDB存储引擎(也曾尝试过Memory引擎)。今年初,我开始转向阿里云的关系型数据库服务,并深入研究了其高效的压缩存储引擎TokuDB。TokuDB在数据压缩和处理大规模数据集方面表现出色,显著提升了存储效率和查询性能。通过实际应用,我发现TokuDB不仅能够有效减少存储成本,还能显著提高数据处理速度,特别适用于高并发和大数据量的场景。 ... [详细]
  • 在循环读取文本文件时,经常会遇到一些常见的错误,如日期格式不正确、文件路径错误等。本文详细分析了这些问题,并提供了具体的解决方法,包括如何正确处理日期字符串和确保文件路径的准确性。通过这些方法,可以有效提高数据读取的稳定性和可靠性。 ... [详细]
  • 利用 Vue CLI 脚手架在 Visual Studio Code 中创建 Vue 项目
    本文介绍了如何在 Visual Studio Code 中使用 Vue CLI 脚手架创建 Vue 项目。首先,确保已安装 Node.js 和 npm,因为 Vue CLI 的安装依赖于 npm。可以通过在命令行中输入 `npm -v` 来检查 npm 是否已成功安装。接下来,我们将详细说明 Vue CLI 的安装步骤及其在 Visual Studio Code 中的应用。 ... [详细]
author-avatar
苦--但是依然love着你
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有