webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解
webpack4
打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack
配置来实现的,而是通过webpack
的写法和内置函数实现的。
目前webpack
针对此项功能提供 2 种函数:
import()
: 引入并且自动执行相关 js 代码require.ensure()
: 引入但需要手动执行相关 js 代码
本文将会进行逐一讲解。
1. 准备工作
此次代码的目录结构如下:
其中,page.js
是入口文件,subPageA.js
和subPageB.js
共同引用module.js
。下面,我们按照代码引用的逻辑,从底向上展示代码:
module.js
:
export default "module";
subPageA.js
:
import "./module";
console.log("I'm subPageA");
export default "subPageA";
subPageB.js
:
import "./module";
console.log("I'm subPageB");
export default "subPageB";
请注意:subPageA.js 和 subPageB.js 两个文件中都执行了console.log()
语句。之后将会看到import()
和require()
不同的表现形式:是否会自动执行 js 的代码?
2. 编写配置文件
下面编写webpack
配置文件(很简单):
const webpack = require("webpack");
const path = require("path");
module.exports = {
entry: {
page: "./src/page.js" //
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
}
};
同时,关于第三方库,因为要在page.js
中使用lodash
,所以,package.json
文件配置如下:
{
"devDependencies": {
"webpack": "^4.15.1"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
3. import()
编写page.js
我个人是非常推荐import()
写法,因为和 es6 语法看起来很像。除此之外,import()
可以通过注释的方法来指定打包后的 chunk 的名字。
除此之外,相信对vue-router
熟悉的朋友应该知道,其官方文档的路由懒加载的配置也是通过import()
来书写的。
下面,我们将书写page.js
:
import(/* webpackChunkName: 'subPageA'*/ "./subPageA").then(function(subPageA) {
console.log(subPageA);
});
import(/* webpackChunkName: 'subPageB'*/ "./subPageB").then(function(subPageB) {
console.log(subPageB);
});
import(/* webpackChunkName: 'lodash'*/ "lodash").then(function(_) {
console.log(_.join(["1", "2"]));
});
export default "page";
命令行中运行webpack
,打包结果如下:
我们创建index.html
文件,通过<script>
标签引入我们打包结果,需要注意的是:因为是单页应用,所以只要引用入口文件即可(即是上图中的page.bundle.js
)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/page.bundle.js"></script>
</body>
</html>
打开浏览器控制台,刷新界面,结果如下图所示:
图中圈出的部分,就是说明import()
会自动运行subPageA.js和subPageB.js
的代码。
在 NetWork 选项中,我们可以看到,懒加载也成功了:
4. require()
编写page.js
require.ensure()
不会自动执行js
代码,请注意注释:
require.ensure(
["./subPageA.js", "./subPageB.js"], // js文件或者模块名称
function() {
var subPageA = require("./subPageA"); // 引入后需要手动执行,控制台才会打印
var subPageB = require("./subPageB");
},
"subPage" // chunkName
);
require.ensure(
["lodash"],
function() {
var _ = require("lodash");
_.join(["1", "2"]);
},
"vendor"
);
export default "page";
其实,根据我们编写的代码,subPageA.js
和subPageB.js
共同引用了module.js
文件,我们可以将module.js
体现抽离出来:
require.include("./module.js"); // 将subPageA和subPageB共用的module.js打包在此page中
// ...
// 再输入上面那段代码
最终打包后,检验和引入方法与import()
一致,这里不再冗赘。
欢迎技术交流,引用请注明出处。
个人网站:董沅鑫的个人网站
原文链接:webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载的更多相关文章
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
- 每天看一片代码系列(四):layzr.js,处理图片懒加载的库
所谓图片的懒加载,即只有当图片处于或者接近于当前视窗时才开始加载图片.该库的使用方法非常简单: var layzr = new Layzr({ attr: 'data-layzr', // attr和 ...
- react以组件为中心的代码分割和懒加载
背景 随着项目越来越复杂,功能够越来越多,JS单个文件就会比较臃肿,js代码拆分显得必不可少. Js文件拆分主要分为按照路由进行js拆分.按照组件进行js拆分. 按照路由拆分:因为本项目请求路径得原因 ...
- webpack散记---代码分割 和 懒加载
webpack methods ES 2015 Loader spec (1)webpack methods方法 require.ensure //可以动态加载依赖 []:dependencies / ...
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- 020 <one-to-one>、<many-to-one>单端关联上的lazy(懒加载)属性
<one-to-one>.<many-to-one>单端关联上,可以取值:false/proxy/noproxy(false/代理/不代理) 实例一:所有lazy属性默认(支持 ...
- vue项目中,单页图片过多,使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
随机推荐
- AJAX笔记整理
AJAX: Asynchronous JavaScript and XML,异步的Javascirpt和Xml. Asynchronous:异步 与之对应的是 synchronous:同步,我们要知道 ...
- MySQL insert语句锁分析
最近对insert的锁操作比较费解,所以自己动手,一看究竟.主要是通过一下三个sql来看一下执行中的sql的到底使用了什么锁. select * from information_schema.INN ...
- veri HDL modeisim仿真:test bench文件编写
预编译指令: verilog HDL预编译指令是以" ' "字符开头,而且不需要以";"结尾. 作用:指示在编译verilog hdl源代码前,需要执行哪些操作 ...
- BASH 正则表达式和文本处理工具
本节内容 1. 什么是正则 2. grep 3. sed 4. awk 5. 其他补充 一 什么是正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方 ...
- VS从数据库表生成Model代码
1.工具——扩展和更新——安装下列插件 2.如图所示,在项目或者MODEL文件夹下添加 3.如图所示,生成了一个datanase.11 4.打开该文件后,将数据库连接字符串改为你自己项目中WebCof ...
- 9.10 翻译系列:EF数据注解特性之StringLength【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/stringlength-dataannotations-attribute-in-co ...
- 剑指offer编程题Java实现——面试题14调整数组顺序使奇数位于偶数之前
题目: 输入一个整数数组,实现一个函数来调整该数组中数组的顺序,使得所有的奇数位于数组的前半部分,偶数位于数组的后半部分. 解题思路:数组中维护两个指针,第一个指针初始化时候指向数组头部,第二个指针初 ...
- Android开发工程师文集-1 小时学会SQLite
前言 大家好,给大家带来Android开发工程师文集-1 小时学会SQLite的概述,希望你们喜欢 内容 什么是Sqlite: 效率高,开源,小型,程序驱动,支持事务操作,无数据类型,可嵌入的关系型数 ...
- 《你不知道的javascript》读书笔记1
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. js的工作原理 引擎:从头到尾负责整个js的编译和运行.(很大一部 ...
- ASP.NET Core 2.2中的Endpoint路由
Endpoint路由 在ASP.NET Core 2.2中,新增了一种路由,叫做Endpoint(终结点)路由.本文将以往的路由系统称为传统路由. 本文通过源码的方式介绍传统路由和Endpoint路由 ...