本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数:

  1. import(): 引入并且自动执行相关 js 代码
  2. require.ensure(): 引入但需要手动执行相关 js 代码

本文将会进行逐一讲解。

>>> 本节课源码

>>> 所有课程源码

1. 准备工作

此次代码的目录结构如下:

其中,page.js是入口文件,subPageA.jssubPageB.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.jssubPageB.js共同引用了module.js文件,我们可以将module.js体现抽离出来:

require.include("./module.js"); // 将subPageA和subPageB共用的module.js打包在此page中

// ...
// 再输入上面那段代码

最终打包后,检验和引入方法与import()一致,这里不再冗赘。


欢迎技术交流,引用请注明出处。

个人网站:董沅鑫的个人网站

原文链接:webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载的更多相关文章

  1. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

  2. 每天看一片代码系列(四):layzr.js,处理图片懒加载的库

    所谓图片的懒加载,即只有当图片处于或者接近于当前视窗时才开始加载图片.该库的使用方法非常简单: var layzr = new Layzr({ attr: 'data-layzr', // attr和 ...

  3. react以组件为中心的代码分割和懒加载

    背景 随着项目越来越复杂,功能够越来越多,JS单个文件就会比较臃肿,js代码拆分显得必不可少. Js文件拆分主要分为按照路由进行js拆分.按照组件进行js拆分. 按照路由拆分:因为本项目请求路径得原因 ...

  4. webpack散记---代码分割 和 懒加载

    webpack methods ES 2015 Loader spec (1)webpack methods方法 require.ensure //可以动态加载依赖 []:dependencies / ...

  5. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  6. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  7. 020 <one-to-one>、<many-to-one>单端关联上的lazy(懒加载)属性

    <one-to-one>.<many-to-one>单端关联上,可以取值:false/proxy/noproxy(false/代理/不代理) 实例一:所有lazy属性默认(支持 ...

  8. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  9. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

随机推荐

  1. C# 最齐全的上传图片方法

    方法里包括了图片大小限制.图片尺寸.文件内容等等的判断... 该案例是mvc下的demo,支持单张图片上传. public ActionResult Upload() { string imgurl ...

  2. 转 Master-Worker模式 并行程序设计模式--Master-Worker模式

    简介 Master-Worker模式是常用的并行设计模式.它的核心思想是,系统有两个进程协议工作:Master进程和Worker进程.Master进程负责接收和分配任务,Worker进程负责处理子任务 ...

  3. pwm互补输出 死区设置

    void TIM8_PWM_Init(u16 arr,u16 psc){       GPIO_InitTypeDef GPIO_InitStructure;    TIM_TimeBaseInitT ...

  4. js-运动函数包

    function move(obj, attr, dir, target, endFn) { clearInterval(obj.timer) //  避免全局变量,所以要用oBox.timer di ...

  5. BASH 环境

    本节内容 1.  什么是shell 2.  命令的优先级 3.  元字符 4.  登录shell与非登录shell 一  什么是shell shell一般代表两个层面的意思,一个是命令解释器,如bas ...

  6. MyBatis 源码分析 - 内置数据源

    1.简介 本篇文章将向大家介绍 MyBatis 内置数据源的实现逻辑.搞懂这些数据源的实现,可使大家对数据源有更深入的认识.同时在配置这些数据源时,也会更清楚每种属性的意义和用途.因此,如果大家想知其 ...

  7. 人工智能必须要知道的语义分割模型:DeepLabv3+

    图像分割是计算机视觉中除了分类和检测外的另一项基本任务,它意味着要将图片根据内容分割成不同的块.相比图像分类和检测,分割是一项更精细的工作,因为需要对每个像素点分类,如下图的街景分割,由于对每个像素点 ...

  8. boost::bind 实现原理, 手动实现一个

    template<typename R, typename T, typename A1> class hangj_call { public: hangj_call(R (T::*f_) ...

  9. struts2框架学习笔记6:拦截器

    拦截器是Struts2实现功能的核心部分 拦截器的创建: 第一种: package interceptor; import com.opensymphony.xwork2.ActionInvocati ...

  10. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...